canvas<\/code> element and the requestAnimationFrame<\/code> function in JavaScript to help us create simple animations.<\/p>\n[ulp id=’tgm4cmEWcKUikZNn’]<\/p>\n
The HTML canvas<\/code> element (introduced in HTML5) is a container<\/strong> for canvas graphics and defined as a resolution-dependent bitmap canvas which can be used for rendering graphs, game graphics, or other visual images on the fly. It is a rectangular area inside a HTML page with no content or border of its own.<\/p>\nJavaScript can be used to draw anything you want on the canvas. It has several methods for drawing paths, boxes, circles, text, and graphic images.You can have more than one canvas<\/code> element on the same page. Each canvas will show up in the DOM, and each canvas maintains its own state. If you give each canvas an id attribute, you can access them just like any other element.<\/p>\n\r\n<canvas id ="a" width="300" height="225"><\/canvas>\r\n<\/pre>\nNow you can easily find that canvas<\/code> element in the DOM with JavaScript, create a context, and then utilize the Canvas API in HTML 5 to draw visualizations<\/p>\nThe requestAnimationFrame<\/code> function requests the browser to call the animation loop at the time of redrawing the screen. Previously, developing animation with Javascript was a bit clunky as compared to ones created with CSS as you had to work with setInterval<\/code> and setTimeOut<\/code> to power your animation loop. There were problems in repainting the screen. With this new function, those problems are all gone and we are able to produce polished animation using the HTML 5 and javascript alone.<\/p>\nThe canvas element is supported in the following browser versions or above.<\/p>\n
\n- Google Chrome 4.0<\/li>\n
- IE 9.0<\/li>\n
- Firefox 2.0<\/li>\n
- Safari 3.1<\/li>\n
- Opera 9.0<\/li>\n<\/ul>\n
The requestAnimationFrame<\/code> is supported by the following browsers versions or above.<\/p>\n\n- Google Chrome 10.0<\/li>\n
- IE 10<\/li>\n
- Firefox 4.0<\/li>\n
- Safari 6.0<\/li>\n
- Opera 15.0<\/li>\n<\/ul>\n
Canvas element and context<\/h2>\n
We need to understand the difference between Canvas element and Canvas context. While the element is a node in DOM, the context is the object with properties and methods that you can use to represent graphics inside canvas element. The context can be 2d<\/code> or webgl<\/code> (3d). You need to use the getContext<\/code> method to return a reference to a Context object<\/p>\nIn the following sections we will use various Canvas properties and methods. Here is a screenshot of what we will be developing today.<\/p>\n
<\/p>\n![\"HTML](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/02\/HtmlCanvas-e1424091525866.jpeg\")
<\/a>HTML Graphics<\/figcaption><\/figure>\nDraw a Graph<\/h2>\n
We will draw a graph paper use the combination of horizontal and vertical lines. First define a HTML canvas element with a id as shown below<\/p>\n
\r\n\r\n<canvas id="GraphCanvas" width="550" height="190"><\/canvas>\r\n\r\n<\/pre>\nNow in your javascript, grab a handle to reference the canvas, and get a reference to the context object, before we draw the lines.<\/p>\n
\r\n\r\nvar canvas = document.getElementById('GraphCanvas');\r\nvar context = canvas.getContext('2d');\r\n\r\n<\/pre>\nInside a loop draw the lines as shown below. The moveTo()<\/code> and lineTo()<\/code> method moves and draws line to the specific start-point and endpoint respectively.<\/p>\nDraw the horizontal line<\/p>\n
\r\nfor (var x = 0.5; x < 500; x += 10) {\r\n context.moveTo(x, 0);\r\n context.lineTo(x, 375);\r\n }\r\n<\/pre>\nDraw the vertical line.<\/p>\n
\r\nfor (var y = 0.5; y < 375; y += 10) {\r\n context.moveTo(0, y);\r\n context.lineTo(500, y);\r\n }\r\n<\/pre>\nThe reason we set the x and y set at 0.5 is because we want to draw a line that is only one pixel wide; therefore we need to shift the coordinates by 0.5 perpendicular to the line’s direction.<\/p>\n
Now we need to actually draw it on the canvas using the stroke()<\/code> method. The strokestyle<\/code> property allows us to specify the color code.<\/p>\n\r\n\r\ncontext.strokeStyle = "#0B1907";\r\ncontext.stroke();\r\n\r\n<\/pre>\nDraw a Line<\/h2>\n
To draw a line, you use the following compulsory methods in sequence:<\/p>\n
\n- Use the
beginPath<\/code> method to declare that we are about to draw a new path<\/li>\n- Use the
moveTo(x, y)<\/code> moves the drawing cursor to the specified starting point.<\/li>\nlineTo(x, y)<\/code> draws a line from the starting position to a new position.<\/li>\n- In order to make the line visible, we apply a stroke to the line using
stroke<\/code> function<\/li>\n<\/ol>\nBy default the stroke color is defaulted to black. You can use the the strokeStyle<\/code> property of the canvas context to set a different color of an HTML5 Canvas line<\/p>\n\r\n\r\n context.beginPath();\r\n context.moveTo(200, canvas.height \/ 2 - 50);\r\n context.lineTo(canvas.width - 200, canvas.height \/ 2 - 50);\r\n context.lineWidth = 20;\r\n context.strokeStyle = '#DF013A';\r\n context.lineCap = 'butt';\r\n context.stroke();\r\n\r\n<\/pre>\nThe lineCap<\/code> property defines the three possible cap style butt, round or square. In order to define the width of an Canvas line, we can use the lineWidth<\/code> property of the canvas context. Both these properties must be set before calling the stroke()<\/code> method.<\/p>\n\r\ncontext.lineWidth = 15;\r\n<\/pre>\nDraw Arc<\/h2>\n
The arc()<\/code> method creates an arc\/curve (used to create circles, or parts of circles). It is 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<\/code>, strokeStyle<\/code>, and lineCap<\/code> properties. The arc method as defined below accepts the following parameters.<\/p>\nx and y coordinates of the center of the circle, r the raidus of the circle, sAngle is the start angle expressed in radians , eAngle is the end angle and last one is weather it would clockwise or counterclockwise.<\/p>\n
context.arc(x,y,r,sAngle,eAngle,clockwise);\r\n<\/pre>\nThe 0 for the starting angle is at the 3 o’clock position of the arc’s circle. Arcs can be styled with the lineWidth<\/code>, strokeStyle<\/code>, and lineCap<\/code> properties as highlighted below.<\/p>\n\r\nvar canvas = document.getElementById('myCanvas');\r\nvar context = canvas.getContext('2d');\r\nvar x = canvas.width \/ 2;\r\nvar y = canvas.height \/ 2;\r\nvar radius = 75;\r\nvar sAngle = 1.1 * Math.PI;\r\nvar eAngle = 1.9 * Math.PI;\r\nvar counterClockwise = false;\r\ncontext.beginPath();\r\ncontext.arc(x, y, radius, sAngle, eAngle, counterClockwise);\r\ncontext.lineWidth = 15;\r\ncontext.strokeStyle = 'black';\r\ncontext.stroke(); \r\n<\/pre>\nDraw some more stuff<\/h2>\n
Similar to the arc, we can draw 2 types of curves namely quadratic and Bezier curve. If a path does not exist, use the beginPath()<\/code> and moveTo()<\/code> methods to define a context point. Both the curves can be styled with the lineWidth<\/em>, strokeStyle<\/em>, and lineCap<\/em> properties.<\/p>\nTo draw a quadratic curve, define a control point that dictates the curvature of your quadratic curve by creating two imaginary tangential lines which are connected to the context point and the ending point. The distance of control point from the context point and end point determines the how broad your curve is. Longer the distance , sharper is your curve. Play around with the co-ordinates as shown below to form a better idea on the curve. Here is the syntax<\/p>\n
\r\ncontext.quadraticCurveTo(Cp1X,Cp1Y,EpX,EpY);\r\n<\/pre>\nwhere Cp1X and Cp1Y indicates the x and y co-ordinates of Control point while EpX and EpY are the x and y co-ordinates of the end point.<\/p>\n
\r\n\r\ncontext.beginPath();\r\ncontext.moveTo(140, 120);\/\/define the context point\r\ncontext.quadraticCurveTo(288, 0, 388, 150);\r\ncontext.lineWidth = 8;\r\ncontext.strokeStyle = 'brown';\r\ncontext.stroke();\r\n\r\n<\/pre>\nTo create a Bezier curve with HTML5 Canvas, we use the bezierCurveTo()<\/code> method.Unlike quadratic curves, Bezier curves are defined with two control points instead of one, allowing us to create more complex curvatures than quadraticCurve . You begin by using the moveTo()<\/code> to create the context point<\/p>\n\r\n\r\ncontext.moveTo(200, 250);\/\/create context point\r\n\r\n<\/pre>\nNow you can call the bezierCurveTo(Cp1X,Cp1Y, Cp2X,Cp2yY,EpX, EpY)<\/code>. Cp1X,Cp1Y, Cp2X and Cp2Y represent the x and y co-ordinates of the 2 control points. EpX and EpY are the x and y co-ordinates of the endpoints. Conceptually, the first part of the curve is tangential to the imaginary line that is defined by the context point and the first control point. The imaginary line that is defined by the second control point and the ending point defines the tangential curve of the second part.<\/p>\n\r\ncontext.beginPath();\r\ncontext.moveTo(200, 250);\/\/create context point\r\ncontext.bezierCurveTo(150, 15, 388, 10, 388, 170);\r\ncontext.lineWidth = 8;\r\ncontext.strokeStyle = 'green';\r\ncontext.stroke();\r\n<\/pre>\nDrawing a shape like rectangle on a canvas is quite easy as well. Call the context.rect()<\/code> method which accepts x and y position co-ordinates along with the width and height.<\/p>\n\r\ncontext.beginPath();\r\ncontext.rect(180, 50, 200, 100);\r\ncontext.fillStyle = 'green';\r\ncontext.fill();\r\ncontext.lineWidth = 7;\r\ncontext.strokeStyle = 'black';\r\ncontext.stroke();\r\n\r\n<\/pre>\nIntroducing requestAnimationFrame<\/h2>\n
Since the advent of requestAnimationFrame<\/code> (sometimes referred as rAF method), developing animations using JavaScript has never been easier. This rAF method allows the browser to handle some of the complicated animation tasks for you, such as managing the frame rate. The inherent problem of using setTimeout<\/code> and setInterval<\/code> was the browser painting the frames quicker than the screen can display then (most computer screens have a refresh rate of 60 frames per second or FPS<\/em>) resulting unnecessary computation.<\/p>\nDue to the fact that setTimeout<\/code> and setInterval<\/code> based animation will continue to run even if the page is not visible to user, which means that it’s not battery friendly animation especially for mobile devices . Using rAF gives the browser the ability to optimize your animations to make them smoother and more resource efficient by eliminating the possibility of unnecessary draws and combining multiple animations into a single re-flow and repaint cycle.<\/p>\nLet’s build our first animation with rAF. We start off by defining a div<\/code> element inside html for container.<\/p>\n\r\n\r\n\r\n<div id="AnimationContainer">\r\n\r\n<h1 id="symbol">*<\/h1>\r\n\r\n<\/div>\r\n\r\n\r\n<\/pre>\nAs rAF is fairly new, we need to check the vendor specific variant of the function in your javaScript. There are four vendor prefixes that you have to deal with:<\/p>\n
\n- moz<\/strong> for Mozilla Firefox<\/li>\n
- webkit<\/strong> for Google Chrome, Apple Safari and other webkit-based browsers<\/li>\n
- o<\/strong> for Opera<\/li>\n
- ms<\/strong> for Microsoft Internet Explorer<\/li>\n<\/ul>\n
\r\n\r\nvar requestAnimationFrame= window.requestAnimationFrame||\r\nwindow.webkitRequestAnimationFrame||\r\nwindow.mozRequestAnimationFrame||\r\nwindow.oRequestAnimationFrame||\r\nwindow.msRequestAnimationFrame;\r\n\r\n<\/pre>\nAs long as the variable evaluates to true to any one of the expressions, we will call requestAnimationFrame<\/code> with the callback function that is responsible to redraw the screen. In our example we first evaluate the div<\/code> element for display.<\/p>\n\r\nvar symbols = document.querySelector("#symbol");\r\n<\/pre>\nThen we assign a variable the characters we want to display an animate. Note how we used the Math<\/code> DOM object for random selection and assignment to the div<\/code><\/p>\n\r\nvar l = displayCHARS[Math.floor(Math.random()*displayCHARS.length)];\r\nsymbols.textContent = l;\r\nrequestAnimationFrame(animate);\r\n<\/pre>\nTypically the frame rate is 60 frames per second(FPS). You can consider using setTimeout<\/code> to delay when the next requestAnimationFrame<\/code> call gets made.<\/p>\n\r\nsetTimeout(function(){\r\n requestAnimationFrame(animate); \r\n },1000\/10);\r\n<\/pre>\nIf you need to stop your animation loop,you can consider using cancelAnimationFrame<\/code>.Just like rAF, obtain a vendor specific handle
\nfor the function to start with.<\/p>\n\r\nvar cancelRAF = window.cancelAnimationFrame||\r\n window.webkitCancelAnimationFrame||\r\n window.mozCancelAnimationFrame||\r\n window.msCancelAnimationFrame ;\r\n<\/pre>\nStore the request specific rAF id to be passed to your cancelRAF function.<\/p>\n
\r\nvar requestID; \/\/store the requestAnimationFrame requestID value\r\nrequestID = requestAnimationFrame(animate);\r\ncancelRAF(requestID);\r\n<\/pre>\nFinally let’s use the requestAnimationFrame<\/code> on a canvas element to have a little animation of our own. Here is what we will develop today.<\/p>\n![\"HTML](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/02\/HtmlAnimation.jpeg\")
<\/a>HTML Animation<\/figcaption><\/figure>\nWe will use clearRect<\/code> function of the context to clear the specified pixels within a given rectangle.Then use the fillStyle<\/code> to color the background and fillRect()<\/code> to draws a “filled” rectangle.<\/p>\n\r\n mainContext.clearRect(0, 0, canvasWidth, canvasHeight);\r\n \/\/ color in the background\r\n mainContext.fillStyle = "grey";\r\n mainContext.fillRect(0, 0, canvasWidth, canvasHeight);\r\n<\/pre>\nNow draw the circle and color it.<\/p>\n
\r\nmainContext.beginPath();\r\nvar radius = 25 + 150 * Math.abs(Math.cos(angle));\r\nmainContext.arc(225, 225, radius, 0, Math.PI * 2, false);\r\nmainContext.closePath();\r\n\/\/ color in the circle\r\nmainContext.fillStyle = "red";\r\nmainContext.fill();\r\n<\/pre>\nDownload the source code<\/h2>\n