javascript

The HTML5 tag <canvas> can be used to draw vector graphics using JavaScript.

Functions

getContext()

To draw graphics on a canvas you have to get the context, like this: 

var canvas = document.getElementById("canvas");  
var context = canvas.getContext("2d");

The Canvas Context is an API used to draw on the canvas. A canvas must not have a context when it is created, it must be retrieved after creation. This method (as seen above) returns a new object for contextId:
getContext(contextId, arguments)

drawImage()

drawImage() imports an image file to the canvas: 

var myImage= new Image();
myImage.src="my_image.png";
context.drawImage(myImage,0,0);

You can use every format supported by the HTML <img> tag.

rotate()

The rotate() function rotates the coordinate system for the canvas: context.rotate(Math.PI / 180); The value must be in radians.

If you want to rotate only one element (an image for instance), you have to save and restore the context like this: 

context.save();
context.rotate(Math.PI / 180);
context.drawImage(myImage,0,0);
context.restore();
//The rest of the drawing will not be rotated.

strokeRect()

You can use strokeRect(x, y, width, height) to draw a rectangle. 

//We first define the color with the strokeStyle property.
context.strokeStyle="#900";
//Then we draw the rectangle.
context.strokeRect(20,30,100,50);

getImageData() and putImagedata()

If you want to manipulate individual pixels, you can use the <getImageData() to retrieve a set of pixels, and putImageData to place it within the array. These two functions use the ImageData object, where pixels may be accessed in a single array.


Code Examples

  1. Using Shadows 
    <!DOCTYPE HTML>
<html>
    <head>
        <title>HTML5 - Canvas Element - 2D Context - Shadows - Example: 1 Rectangle 1 Square</title>
    </head>
    <script type="text/javascript">
        function shadowsHelloWorld(){
            //Many possible values for shadowColor
            //Here I use 4
            //0 - 3
            var shadowColorValues = [
            'black', 'green', 'blue', 'orange'
            ];

            //Grab a random value for the repetition attribute
            //return a random integer between 0 and 3
            var resultStr = shadowColorValues[Math.floor(Math.random() * 4)];

            //Many possible values for shadowOffsetX
            //Here I use 4
            //0 - 3
            var shadowOffsetXvalues = [
            '0', '10', '25', '55'
            ];

            //Grab a random value for the repetition attribute
            //return a random integer between 0 and 3
            var resultStr2 = shadowOffsetXvalues[Math.floor(Math.random() * 4)];

            //Many possible values for shadowOffsetY
            //Here I use 4
            //0 - 3
            var shadowOffsetYvalues = [
            '0', '10', '25', '55'
            ];

            //Grab a random value for the repetition attribute
            //return a random integer between 0 and 3
            var resultStr3 = shadowOffsetYvalues[Math.floor(Math.random() * 4)];

            //Many possible values for shadowBlur
            //Here I use 4
            //0 - 3
            var shadowBlurValues = [
            '0', '10', '25', '55'
            ];

            //Grab a random value for the repetition attribute
            //return a random integer between 0 and 3
            var resultStr4 = shadowBlurValues[Math.floor(Math.random() * 4)];
            var canvas = document.getElementById("myCanvas");
            var rectangle = canvas.getContext('2d');

            rectangle.fillStyle = 'red';
            rectangle.strokeStyle = 'black';
            rectangle.lineWidth = 2;

            //USE THE SHADOW VALUES HERE
            rectangle.shadowColor = resultStr;
            rectangle.shadowOffsetX = resultStr2;
            rectangle.shadowOffsetY = resultStr3;
            rectangle.shadowBlur = resultStr4;

            //(x, y, width, height)
            rectangle.fillRect(80, 90, 60, 60);
            rectangle.strokeRect(80, 90, 60, 60);

            var triangle = canvas.getContext('2d');

            triangle.fillStyle = 'yellow';
            triangle.strokeStyle = 'black';
            triangle.lineWidth = 2;

            //NOTE - IF YOU DO NOT EXPLICITLY DEFINE THESE VALUES FOR THE NEXT SHAPE
            //THE SHADOW VALUES ABOVE WILL BE USED IN THIS NEXT SHAPE
            //
            triangle.shadowColor = "black";
            triangle.shadowOffsetX = 0;
            triangle.shadowOffsetY = 0;
            triangle.shadowBlur = 0;

            triangle.beginPath();

            //(x,y)
            // of the first point
            triangle.moveTo(100, 10);

            triangle.lineTo(125, 50);
            triangle.lineTo(75, 50);
            triangle.lineTo(100, 10);

            triangle.fill();
            triangle.stroke();

            triangle.closePath();

            //Grab last Shadow value
            //Print it out to the screen
            document.getElementById('shadowValue').innerHTML = '<p>' + "The shadowColor is " + resultStr + '<br />' + "The shadowOffsetX is " + resultStr2 + '<br />' + "The shadowOffsetY is " + resultStr3 + '<br />' + "The shadowBlur is " + resultStr4 + '</p>';

        }
  </script>
    <body onload="shadowsHelloWorld();">
    <canvas id="myCanvas" width="200" height="200">
            Sorry, your browser does not support the canvas tag.
    </canvas>
    <br />
    <h3>The Rectangle is drawn with the following values:</h3>
    <!--JavaScript function will place HTML in this div-->
    <div id="shadowValue"></div>
    <br />
    <form>
        <button onclick="shadowsHelloWorld();">Redraw with more random values</button>
    </form>
</body>
</html>
  2. Using Line Caps and Line Joins 
    <!DOCTYPE HTML>
<html>
    <head>
        <title>HTML5 - Canvas Element - 2D Context - Line Styles - Example: 2 Lines</title>
    </head>
    <script type="text/javascript">

        function lineStylesHelloWorld(){

            //3 possible values for the lineCap attribute
            //0 - 2
            var lineCapValues = [
            'butt', 'round', 'square'
            ];
            //Grab a random value for the lineCap attribute
            //return a random integer between 0 and 2
            var resultStr = lineCapValues[Math.floor(Math.random() * 3)];


            //3 possible values for the lineJoin attribute
            //0 - 2
            var lineJoinValues = [
            'bevel', 'round', 'miter'
            ];
            //Grab a random value for the lineCap attribute
            //return a random integer between 0 and 2
            var resultStr2 = lineJoinValues[Math.floor(Math.random() * 3)];

            var canvas = document.getElementById("myCanvas");

            var line = canvas.getContext("2d");

            line.lineWidth = 10;

            //Use the random values for these attribute values
            line.lineCap = resultStr;
            line.lineJoin = resultStr2;
            
            line.moveTo(20, 20);
            line.lineTo(100, 50);
            line.lineTo(20, 100);
            line.stroke(); 

            //Grab Line Style Value(s)
            //Print it out to the screen
            document.getElementById('lineStyleValue').innerHTML = '<p>' + "The lineCap value is: " + resultStr + '<br />' + "The lineJoin value is: " + resultStr2 + '</p>';

        }
  </script>
    <body onload="lineStylesHelloWorld();">
    <canvas id="myCanvas" width="200" height="200">
            Sorry, your browser does not support the canvas tag.
    </canvas>
    <br />
    <!--JavaScript function will place HTML in this div-->
    <div id="lineStyleValue"></div>
    <br />
    <form>
        <button onclick="lineStylesHelloWorld();">Redraw with another random value</button>
    </form>
</body>
</html>
  3. Transforming Arcs 
    <!DOCTYPE HTML>
<html>
    <head>
        <title>Canvas-Drawing-State-Transformations-Translate-Transform_Arcs</title>
    </head>
    <script type="text/javascript">
        function drawingStatesHelloWorld() {

            var N = Math.PI * 3 / 2;
            var S = Math.PI / 2;
            var E = 0;
            var W = Math.PI;

            var canvas = document.getElementById("myCanvas");
            var myArc = canvas.getContext('2d');

            //Attribute valus of the first state
            myArc.strokeStyle = 'blue';
            myArc.lineWidth = 6;

            //BLUE ARC
            myArc.beginPath();
            myArc.arc(30, 30, 20, N, S, true);
            myArc.stroke();
            myArc.closePath();

            //save the current drawing state
            myArc.save();

            //make a change to the current drawing state
            myArc.strokeStyle = 'red';

            //RED ARC 1


            myArc.beginPath();
     
            //TRANSFORM
            //Horizontal Scale
            //scale-x
            //transform(X,0,0,1,0,0);
            //
            myArc.transform(3, 0, 0, 1, 0, 0);

            myArc.arc(30, 30, 20, N, S, true);

            myArc.stroke();
            myArc.closePath();


            //RED ARC 2
            myArc.beginPath();

            //TRANSFORM
            //Horizontal Skew
            //skew-x
            //transform(1,X,0,1,0,0);
            //
            myArc.transform(1, 3, 0, 1, 0, 0);

            myArc.arc(30, 30, 20, N, S, true);

            myArc.stroke();
            myArc.closePath();


            //RED ARC 3
            myArc.beginPath();
            //TRANSFORM
            //vertical Skew
            //skew-y
            //transform(1,0,X,1,0,0);
            //
            myArc.transform(1, 0, 3, 1, 0, 0);

            myArc.arc(30, 30, 20, N, S, true);
            myArc.stroke();
            myArc.closePath();



            //RED ARC 4
            myArc.beginPath();
            //TRANSFORM
            //vertical Scale
            //scale-y
            //transform(1,0,0,X,0,0);
            //
            //NOTE - this last arc was moved to the left "-70" seen here
            //This was done in order to view the effect of the Vertical Skew
            //
            myArc.transform(1, 0, 0, 3, -70, 0);

            myArc.arc(30, 30, 20, N, S, true);
            myArc.stroke();
            myArc.closePath();


        }

  </script>
    <body onload="drawingStatesHelloWorld();">
    <canvas id="myCanvas" width="400" height="400">
            Sorry, your browser does not support the canvas tag.
    </canvas>
</body>
</html>

External links