ISC440: Web Programming II Ch14: HTML5 Canvas Dr. Abdullah Almutairi Spring 2016 © 2007 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

11/14/2018 7:14 AM Canvas Introduction The HTML <canvas> element is used to draw graphics on a web page. The graphic to the left is created with <canvas>. It shows four elements: a red rectangle, a gradient rectangle, a multi-color rectangle, and a multi-color text. The <canvas> element is only a container for graphics. You must use a script to actually draw the graphics. Canvas has several methods for drawing paths, boxes, circles, text, and adding images. © 2007 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Canvas Applications Canvas Can Draw Text: Canvas can draw colorful text, with or without animation. Canvas Can Draw Graphics: Canvas has great features for graphical data presentation with an imagery of graphs and charts. Canvas Can be Animated: Canvas objects can move. Everything is possible: from simple bouncing balls to complex animations. Canvas Can be Interactive: Canvas can respond to JavaScript events. Canvas can respond to any user action (key clicks, mouse clicks, button clicks, finger movement). Canvas Can be Used in Games: Canvas' methods for animations, offer a lot of possibilities for HTML gaming applications.

Canvas Example In HTML, a <canvas> element looks like this: The <canvas> element must have an id attribute so it can be referred to by JavaScript. The width and height attribute is necessary to define the size of the canvas. Tip: You can have multiple <canvas> elements on one HTML page. By default, the <canvas> element has no border and no content. To add a border, use a style attribute:

Drawing on Canvas Steps for drawing on Canvas: All drawing on the HTML canvas must be done with JavaScript. Steps for drawing on Canvas: Find the <canvas> element. This is done by using the getElementById(). You need a drawing object for the canvas. The getContext() is a built-in HTML object, with properties and methods for drawing. Now you can draw on the canvas. First, set a fill style for the object you want to draw. Then, draw the object.

Drawing on Canvas Example

Canvas Coordinates The HTML canvas is a two-dimensional grid. The upper-left corner of the canvas has the coordinates (0,0) In the previous slide, you saw this method used: fillRect(0,0,150,75). This means: Start at the upper-left corner (0,0) and draw a 150x75 pixels rectangle. (0,0)

Draw a Recatangle The method rect(X, Y, width, height) draws a an empty rectangle in the canvas with the following parameters: X: Represents the x-coordinate of the top left corner of the rectangle. Y: Represents the y-coordinate of the top left corner of the rectangle. Width: Represents the width of the rectangle. Height: Represents the height of the rectangle. The method fillRect draws a colored rectangle with the same parameters.

Draw a Rectangle The method rect example

Draw a Line To draw a straight line on a canvas, use the following methods: moveTo(x,y) - defines the starting point of the line lineTo(x,y) - defines the ending point of the line To actually draw the line, you must use one of the "ink" methods, like stroke().

Draw A Line The width and color of a line drawn in a canvas can be changed using the following properties: lineWidth: Controls the thickness and width of a line. strokeStyle: Changes the color of a line or shape.

Draw An Arc The method arc() is used to create an arc. Arcs are defined by a center point, a radius, a starting angle, an ending angle, and the drawing direction (either clockwise or anticlockwise). Arcs can be styled with the linewidth and strokeStyle properties.

Draw an Arc Example

Line Path To create a path in a canvas, we can connect multiple subpaths.  The ending point of each new subpath becomes the new context point.  We can use the lineTo() and arcTo()  methods to construct each subpath which makes up our path.  We can also use the beginPath() method each time we want to start drawing a new path.

Line Path Example

Line Path arcTo() The arcTo() method creates an arc/curve between two tangents on the canvas. context.arcTo(x1,y1,x2,y2,r);

arcTo() Example

Draw a Circle To draw a circle on a canvas, use the following methods: beginPath(); arc(x,y,r,start,stop) Define a circle with the arc() method. Then use the stroke() method to actually draw the circle:

Drawing Text on the Canvas To draw text on a canvas, the most important property and methods are: font - defines the font properties for the text fillText(text,x,y) - draws "filled" text on the canvas strokeText(text,x,y) - draws text on the canvas (no fill) Using fillText: Example: Set font to 30px "Arial" and write a filled text on the canvas:

Drawing Text on the Canvas Using strokeText() Example Set font to 30px "Arial" and write a text, with no fill, on the canvas: Add Color and Center Text Set font to 30px "Comic Sans MS" and write a filled red text in the center of the canvas:

Canvas Translate Translations enable us to move entire pieces of the canvas with just one method.  For example, if we have a function that draws a complex drawing onto the canvas, and we need a way to move the drawing around, it's much easier to translate the context than it is to adjust the x and y position of all the points that make up the drawing. translate() transform method is used for translating the canvas.

Canvas Translate Example <canvas id="myCanvas" width="578" height="200"></canvas> <script> var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); var rectWidth = 150; var rectHeight = 75; // translate context to center of canvas context.translate(canvas.width / 2, canvas.height / 2); context.fillStyle = 'blue'; context.fillRect(rectWidth / -2, rectHeight / -2, rectWidth, rectHeight); </script>

Canvas Translate Example

Canvas Scale To scale the HTML5 Canvas, we can use the scale() transform method to scale the x and y components of the canvas context.

Canvas Scale Example

Canvas Rotate To rotate the HTML5 Canvas, we can use the rotate() transform method.  The rotate transformation requires an angle in radians.  To define the rotation point, we need to first translate the canvas context such that the top left corner of the context lies on the desired rotation point. 

Canvas Rotate Example In the following example, we've translated the canvas context such that the top left corner of the context is directly on the center of the rectangle, which produces a rotation about the center of the rectangle.

Canvas Rotate Example