Created
May 25, 2014 18:02
-
-
Save rolandsusans/41c180785a7c14414a92 to your computer and use it in GitHub Desktop.
Javascript drawing canvas
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| width:500px; | |
| margin:0 auto; | |
| } | |
| * {font-family:Helvetica,Arial, sans-serif;} | |
| input[type=text], select {width:250px;} | |
| label {width:160px; display:inline-block;} | |
| #buttons { | |
| text-align:right; | |
| width:410px; | |
| margin-top:2ex; | |
| } | |
| canvas { | |
| display:block; | |
| margin:20px auto; | |
| width:350px; | |
| box-shadow:2px 2px 6px 2px #BBB; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Meme picture generator & a web technology homework</title> | |
| </head> | |
| <body> | |
| <h1>Meme picture generator</h1> | |
| <div> | |
| <div> | |
| <label>Pick a character</label> | |
| <select id="image-select"> | |
| <option value=""></option> | |
| <option value="http://www.captionite.com/templates/good_guy_greg.jpg" > | |
| Good guy Greg</option> | |
| <option value="http://linechatdescargar.com/templates/Bad_Luck_Brian.jpg"> | |
| Bad luck Brian</option> | |
| <option value="http://www.captionite.com/templates/high_expectations_asian_father.jpg"> | |
| High Expectations Asian Father</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label>... or enter image url</label> | |
| <input type="url" id="image-url"> | |
| </div> | |
| <label for="line-top">Top line</label><input type="text" id="line-top"> | |
| </div><div> | |
| <label for="line-bottom">Bottom line</label><input type="text" id="line-bottom"> | |
| </div> | |
| <div id="buttons"> | |
| <button id="makeMeme">Generate!</button> | |
| <button id="downloadMeme">Download it</button> | |
| </div> | |
| <canvas width="350" height="350"></canvas> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //object for storing information | |
| var memeObj = { | |
| ChoiseStatus: 0,//will be 1 if character is chosen | |
| UrlStatus: 0,//will be 1 if url is entered | |
| Choise: '', | |
| Url: '',//picture url will be stored | |
| TopLine: '', | |
| BottomLine: '' | |
| }; | |
| //function that draws image in canvas | |
| function DrawImage(){ | |
| var canvas = document.querySelector("canvas");//finding a place for meme | |
| var context = canvas.getContext("2d");//method returns an object that provides methods and properties for drawing on the canvas | |
| var width = canvas.width;//gets canvas width in html doc | |
| var height = canvas.height;//gets canvas height in html doc | |
| //formating text on canvas | |
| context.font = "25pt bold Arial";//setting font | |
| context.textAlign = "center";//aligment | |
| context.fillStyle = 'white';//color | |
| var imageObject = new Image();//creating new object for img | |
| imageObject.src = memeObj.Url; | |
| //while img loading | |
| imageObject.onload = function() { | |
| context.drawImage(imageObject, 0, 0, width, height); | |
| wrapText(context, memeObj.TopLine, width/2, 35, width-50,35); | |
| wrapText(context, memeObj.BottomLine,width/2, width-50, height-50, 35); | |
| }; | |
| } | |
| //function that wraps text in canvas | |
| function wrapText(context, text, x, y, maxWidth, lineHeight) { | |
| var words = text.split(' ');//splits text in words, delimiter ' ' | |
| var line = ''; | |
| for(var n = 0; n < words.length; n++) { | |
| var testLine = line + words[n] + ' ';//concatinig strings | |
| var metrics = context.measureText(testLine);//gets lenght of testLine | |
| var testWidth = metrics.width;//gets width of | |
| if (testWidth > maxWidth && n > 0) {//if test Width shorter than wrap maxWidth fillText to canvas | |
| context.fillText(line, x, y); | |
| line = words[n] + ' '; | |
| y += lineHeight;//increase posittion in canvas | |
| } | |
| else {//if end is reached, write whats left to canvas | |
| line = testLine; | |
| } | |
| } | |
| context.fillText(line, x, y); | |
| } | |
| //function checks if fields are entered, initialize values | |
| function validate(){ | |
| //asigning URL to selected choise, changing status | |
| if(document.getElementById("image-select").value.length > 0) { | |
| memeObj.Url=document.getElementById("image-select").value; | |
| memeObj.ChoiseStatus=1; | |
| } else {//for multiple repetitions | |
| memeObj.ChoiseStatus=0; | |
| } | |
| //asigning URL to selected choise, changing status | |
| if(document.getElementById("image-url").value.length > 0){ | |
| memeObj.Url=document.getElementById("image-url").value; | |
| memeObj.UrlStatus=1; | |
| } else {//for multiple repetitions | |
| memeObj.UrlStatus=0; | |
| } | |
| //asigning values to TopLine BottomLine in obj memeObj | |
| memeObj.TopLine=document.getElementById("line-top").value; | |
| memeObj.BottomLine=document.getElementById("line-bottom").value; | |
| if((memeObj.ChoiseStatus + memeObj.UrlStatus)===0){ alert("Pick a character, or enter image URL");}//alert propted when nothing is chose | |
| } | |
| var ButtonGenerate = document.getElementById("makeMeme"); | |
| ButtonGenerate.onclick=function(){ | |
| validate(); | |
| if(memeObj.ChoiseStatus==1){ | |
| DrawImage(); | |
| } | |
| else if (memeObj.UrlStatus==1){ | |
| DrawImage(); | |
| } | |
| }; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment