Fandom

JavaScript Wiki

Canvas

87pages on
this wiki
Add New Page
Talk0 Share

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

FunctionsEdit

getContext() Edit

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() Edit

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() Edit

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()Edit

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() Edit

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 ExamplesEdit

  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 Edit

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.