Simple drawing in HTML5

Tejas Hoskatti

13 years ago

Drawing in HTML5 is basically using JavaScript to draw lines, figure,charts and to color in an area using set equations and functions. The best part is the end result will fool the user to think that its an image 🙂
All that is needed is a

Canvas element,
JavaScript knowledge(even if you know C,C++ and basic English language 🙂 )
Some creative intent or just for a sake of fun try something

What Tools Are at Your disposal?

Drawing tools/pre-functions which can be used

Rectangles
Arcs- can also be used to draw Circles-context.arc()
Paths and line drawing
Bezier and quadratic curves

Effects which can be used on Objects

Fills and strokes
Shadows
Linear and radial gradients
Alpha transparency
Compositing

Transformations on Objects

Scaling
Rotation
Translation
Transformation matrix

Getting data in and out

Loading external images by URL, other canvases or data URI
Retrieving a PNG representation of the current canvas as a data URI

More Info on this can be found at the W3C site.

<!DOCTYPE html>
<html>
<head>
<title>Canvas Drawing</title>

       <!–[if IE]><script src=”excanvas.js”></script><![endif]–>
       <script type=”text/javascript”>
           window.onload = function() {
               var drawingCanvas = document.getElementById(‘myDrawing’);

               // Check the element is in the DOM and the browser supports canvas
               if(drawingCanvas && drawingCanvas.getContext) {
                   // Initaliase a 2-dimensional drawing context
                   var context = drawingCanvas.getContext(‘2d’);

                   // Create the yellow face
                   context.strokeStyle = “#000000”;
                   context.fillStyle = “#FFFF00”;
                   context.beginPath();
                   context.arc(100,100,50,0,Math.PI*2,true);
                   context.closePath();
                   context.stroke();
                   context.fill();

                   // Add 2 blue eyes
                   context.strokeStyle = “#000000”;
                   context.fillStyle = “#FFFFFF”;
                   context.beginPath();
                   context.arc(80,80,8,0,Math.PI*2,true);
                   context.closePath();
                   context.stroke();
                   context.fill();

                   context.fillStyle = “#000066”;
                   context.beginPath();
                   context.arc(80,80,5,0,Math.PI*2,true);
                   context.closePath();
                   context.fill();

                   context.strokeStyle = “#000000”;
                   context.fillStyle = “#FFFFFF”;
                   context.beginPath();
                   context.arc(120,80,8,0,Math.PI*2,true);
                   context.closePath();
                   context.stroke();
                   context.fill();

                   context.fillStyle = “#000066”;
                   context.beginPath();
                   context.arc(120,80,5,0,Math.PI*2,true);
                   context.closePath();
                   context.fill();

                   // Create the triangle-shaped nose
                   context.fillStyle = “#000000”;
                   context.beginPath();
                   context.moveTo(93,100);
                   context.lineTo(100,93);
                   context.lineTo(107,100);
                   //context.lineTo(100,107);
                   context.closePath();
                   context.fill();

                   // Add the smile
                   context.strokeStyle = “#000000”;
                   context.beginPath();
                   context.moveTo(70,110);
                   context.quadraticCurveTo(100,150,130,110);
                   context.quadraticCurveTo(100,150,70,110);
                   context.closePath();
                   context.stroke();
               }
           }
       </script>
   </head>

   <body>
       <canvas id=”myDrawing” width=”200″ height=”200″>
           <p>Your browser doesn’t support canvas.</p>
       </canvas>

</body>
</html>