Getting Started with Canvas IDIA Spring 2013 Bridget M. Blodgett

Canvas HTML5 added the canvas element to the current line up of tags Unlike previous elements the canvas actually allows users to engage with presentation through a drawing or paint like presentation

Inserting Canvas Since canvas is supported by HTML5 it has its own element you can use – Once you have added this code the browser will automatically reserve this space on the page – The top left corner is the most important since it is where everything will be measured from

Simple Canvas Without using CSS to create a border or JavaScript to create some interactivity the canvas is just a big blank spot on your page By default the canvas you create is transparent and will fill in with colored pixels once you enable drawing – This allows it to be positioned on top of other elements like an image or a paragraph Be careful assigning a size to the canvas using CSS, it causes the default 300x150 pixel canvas to scale to that size

Filling in Canvas JavaScript is used to make content on the canvas You can make a variable and assign the output of your canvas page to it for manipulation – The book shows.getContext as one function usable in canvas. What are some others? Try altering the following code to make different sized rectangles

window.onload = function() { var canvas = document.getElementById("tshirtCanvas"); var context = canvas.getContext("2d"); context.fillRect(10, 10, 100, 100); };

Checking For Support Not all browsers support canvas yet and you should always check to make sure that it is supported before trying anything By using this code you can run this check: if (canvas.getContext) { // you have canvas } else { // sorry no canvas aPI support } By placing text between the canvas tags you can alert users who don’t have canvas that they are missing a feature on the site – This text is conveniently ignored by browsers that support canvas

Including Forms You can use forms on your HTML page to allow a user to make changes to the canvas – Instead of submitting JS will handle the values when the user clicks a button The JS for pulling information from an option menu is a bit different than what we’ve encountered before

var selectObj = document.getElementById("backgroundColor"); var index = selectObj.selectedIndex; var bgColor = selectObj[index].value; var selectObj = document.getElementById("shape"); var index = selectObj.selectedIndex; var shape = selectObj[index].value; var selectObj = document.getElementById("foregroundColor"); var index = selectObj.selectedIndex; var fgColor = selectObj[index].value;

Creating Random Elements By using custom functions we can make and add random elements to the canvas The important step is making sure that any custom functions you create are passed the canvas and the context variables – If you forget this they won’t be able to add their random items to the canvas!

function drawSquare(canvas, context) { var w = Math.floor(Math.random() * 40); var x = Math.floor(Math.random() * canvas.width); var y = Math.floor(Math.random() * canvas.height); context.fillStyle = "lightblue"; context.fillRect(x, y, w, w); }

Replacing Canvas Items If you want users to be able to “reset” their canvas you should make a function the sends the canvas back to its starting state The easiest way to do this is often to just fill in the background with a rectangle that is the same color and size as your default canvas element

function previewHandler() { //stuff fillBackgroundColor(canvas, context); //other stuff } function fillBackgroundColor(canvas, context) { var selectObj = document.getElementById("backgroundColor"); var index = selectObj.selectedIndex; var bgColor = selectObj[index].value; context.fillStyle = bgColor; context.fillRect(0, 0, canvas.width, canvas.height); }

Paths and Strokes Shapes besides rectangles can be more difficult – We need to determine a path that the shape follows and then stroke (copy over) that path with a color The beginPath(), moveTo(), an lineTo() methods set up the initial outline – closePath() will end the shape we’re drawing by connecting the current point with the starting point

function fillTriangle(canvas, context) { context.beginPath(); context.moveTo(100, 150); context.lineTo(250, 75); context.lineTo(125, 30); context.closePath(); context.lineWidth = 5; context.stroke(); context.fillStyle = "red"; context.fill(); }

Arcs Circles are more difficult because they do not go in a straight line – JS needs to compute the arc or degree of the curve between two points Like other shapes begin with beingPath() but then use arc() – context.arc(x, y, radius, startangle, endangle, direction)

Radians Canvas does not compute circles in degrees (like we are used to doing) Instead it uses radians which are equal to 180 divided by π A function can do this conversion for you automatically function degreesToRadians(degrees) { return (degrees * Math.PI)/180; }

Combining Sources You can integrate information from other web services into the canvas Using the callback function from last week we can get a user’s twitter information to display on the canvas It simply requires a small script on the HTML page and a function in our JS code <script src=" edsmartly.json? callback=updateTweets">

function updateTweets(tweets) { var tweetsSelection = document.getElementById("tweets"); for (var i = 0; i < tweets.length; i++) { tweet = tweets[i]; var option = document.createElement("option"); option.text = tweet.text; option.value = tweet.text.replace("\"", "'"); tweetsSelection.options.add(option); } tweetsSelection.selectedIndex = 0; }

Adding Text There is a method called fillText() which will take some input text and a starting area and write it to your canvas You can then use the font, textBasline, textAlign properties to style your text on the screen – They accept strings similar to CSS inside quotes

function drawText(canvas, context) { var selectObj = document.getElementById("foregroundColor"); var index = selectObj.selectedIndex; var fgColor = selectObj[index].value; context.fillStyle = fgColor; context.font = "bold 1em sans-serif"; context.textAlign = "left"; context.fillText("I saw this tweet", 20, 40); selectObj = document.getElementById("tweets"); index = selectObj.selectedIndex; var tweet = selectObj[index].value; context.font = "italic 1.2em serif"; context.fillText(tweet, 30, 100); context.font = "bold 1em sans-serif"; context.textAlign = "right"; context.fillText("and all I got was this lousy t-shirt!", canvas.width-20, canvas.height-40); }

Adding Images Images require a bit of prep work – The image must be in a folder accessible to your JS – In the JS code you will need to make a new image variable and set its.src property to the location of the image file Then once the image has loaded you can draw it on the screen at a selected location

function drawBird(canvas, context) { var twitterBird = new Image(); twitterBird.src = "twitterBird.png"; twitterBird.onload = function() { context.drawImage(twitterBird, 20, 120, 70, 70); }; }