Canvas HTML5
the code <code> settwmerout(function(){alert("hey there!"),5000);</code> will generate a Javascript popup (an alert) after a delay of?
5 seconds
drawImage() the basic signature simply places the image at a given x,y position on the canvas. the width and height parameters are optional and are used for scaling or distorting the origional image (generally a bad idea) ex)
<!DOCTYPE html> ---- C O D E O M I T T E D ---- if (canvas.getContext) { var context = canvas.getContext("2d"); var logo = new Image(); logo.src = 'Images/logo.png'; logo.onload = function() { context.drawImage(logo,50,50); } } ---- C O D E O M I T T E D ----
the <canvas> tag only creates a drawing surface. To actually do any drawing, you need to use ___________. the first step is getting the context
Javascript
when adding an image to your drawing you need :
an image object as the first parameter. you can grab an image from the page using document.getElementById('my-image') or you can create an image object using Javascript var img = new Image(); img.src = 'images/my-image.gif';
assuming that we have a valid context object named <code>context</code> what method create a path from the current point back to the starting point?
context.closePath
assuming that we have a valid context object named <code>context</code>, how can we move the path to a specified point on the canvas without creating a line?
context.moveTo(100,100)
a call to the canvas method <code>fillRect(100,90,80,70)</code> means:
create a rectangle with top left coordinates on (100,90) with width 80 and height 70
you can add existing images to your drawing using the ________________ method, which is overloaded and has two signatures drawImage( image, x, y, width, height) //basic drawImage (image, sx, sy, sWidth, sHeight, dx, dy, width, dHeight) //sprites
drawImage()
there are two methods for adding text to the canvas: _______________ and _____________
fillText(text, x,y) and strokeText(text, x,y)
text in canvas _______________ adds "solid" text at the x,y position
fillText(text,xy)
the canvas method quadraticCurveTo takes :
four parameters the x and y coordinates of the control point and the x and y coordinates of the end point
which of the following are valid colors for use in setting <code>fillStyle</code> or <code>stroke style</code>
green #ff0000 rob(255,0,0) all of the above!
the canvas element takes two attributes: _______ and ________. between the open and close tags you can place fallback content for browsers that do not support canvas like <canvas id="my-canvas" width"500" height="500"> Your browser doesn't support canvas.>
height and width
assuming that we have the code <code> var canvas=document.getElementById("my-canvas")</code>, how can we test to see if the user's browser support canvas drawing?
if(canvas.getContext){...}
circles and arcs are created by identifying the center of the circle (x,y) and the choosing the __________. the syntax is arc (x, y, radius, startDegree, endDegree, counterclockwise);
radius
to get a sprite to work we have to :
specify which part of the image (the source) we want tp show and where (and how large) we want it to appear on the canvas.
a _______ is an image file that contains several graphics used on a web page. By showing different parts of the sprite in different locations, it appears that there are several different images, but they are all contained in a single file, which translates to a single (faster) download
sprite
to write "hollow" text (text with no fill) we would use which canvas method?
strokeText
text in canvas ______________ adds "hollow" text at the x,y position
strokeText(text, x,y)
the first two parameters of the canvas <code>arc</code> method are:the x and y coordinates
the x and y coordinates the center of the arc
it is generally a good idea to hold off trying to display the image in your drawing until
you are sure that it has loaded. so you should wrap your drawing code as shown below: img.onload = function() { context.drawImage(/*signature* /);
