drawing with the html5 canvas

DRAWING WITH THE HTML5 CANVAS

HTML5 CANVAS

Grants you a very fine level of control over individual pixels on web page

Can be used to create anything using JavaScript:Custom UI elements Image ManipulationAnimationsCustom keyboard and mouse interfaces

Integrates seamlessly with video files, audio clips, and touchscreen events

CANVAS API

Created using the canvas element at any point within the <body> tag group <canvas id=‘identifier’ height=‘500’ width=‘500’></canvas>

Canvas must be initialized in JavaScript in order to draw on it. <script type=‘text/javascript’>

var canvas = document.getElementById(identifier); var context = canvas.getContext(type);

//perform tasks here </script>

CANVAS ELEMENT

The HTML5 Canvas element is an HTML tag similar to the <div>, <a>, or <table> tag

It's important to understand the difference between the canvas element and the canvas context The canvas element is the actual DOM node that's embedded in the HTML page.

The canvas context is an object with properties and methods that you can use to render graphics inside the canvas element. The context can be 2d or webgl (3d).

Each canvas element can only have one context.

<body><canvas id="myCanvas" width="578" height="200"></canvas>

<script>var canvas = document.getElementById('myCanvas');var context = canvas.getContext('2d');

// do stuff here</script>

</body>

DRAWING A LINE

To draw a line using HTML5 Canvas, we can use the beginPath(), moveTo(), lineTo(), and stroke() methods.1. use the beginPath() method to declare that you

are about to draw a new path2. use the moveTo() method to position the context

point (i.e. drawing cursor)3. use the lineTo() method to draw a straight line

from the starting position to a new position4. to make the line visible, apply a stroke to the line

using stroke()

DRAWING A LINE EXAMPLE

<canvas id="myCanvas" width="578" height="200"></canvas> <script> var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d');

context.beginPath(); context.moveTo(100, 150); context.lineTo(450, 50); context.stroke(); </script>

DRAWING ARCS

To create an arc with HTML5 Canvas, we can use the arc() method.

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, strokeStyle, and lineCap properties.

DRAWING ARCS EXAMPLE <canvas id="myCanvas" width="578" height="250"></canvas> <script> var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); var x = canvas.width / 2; var y = canvas.height / 2; var radius = 75; var startAngle = 1.1 * Math.PI; var endAngle = 1.9 * Math.PI; var counterClockwise = false;

context.beginPath(); context.arc(x, y, radius, startAngle, endAngle, counterClockwise); context.lineWidth = 15;

// line color context.strokeStyle = 'black'; context.stroke(); </script>

DRAWING A RECTANGLE

To create a rectangle using HTML5 Canvas, we can use the rect() method rather than constructing the shape with 4 connecting lines.

The rectangle is positioned with x and y parameters, and is sized with width and height parameters.

The rectangle is positioned about its top left corner.

DRAWING A RECTANGLE EXAMPLE


context.beginPath(); context.rect(188, 50, 200, 100); context.fillStyle = 'yellow'; context.fill(); context.lineWidth = 7; context.strokeStyle = 'black'; context.stroke(); </script>

DRAWING A CIRCLE

To draw a circle with HTML5 Canvas, you can create a full arc using the arc() method by defining the starting angle as 0 and the ending angle as 2 * PI.

DRAWING A CIRCLE EXAMPLE

<canvas id="myCanvas" width="578" height="200"></canvas> <script> var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); var centerX = canvas.width / 2; var centerY = canvas.height / 2; var radius = 70;

context.beginPath(); context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); context.fillStyle = 'green'; context.fill(); context.lineWidth = 5; context.strokeStyle = '#003300'; context.stroke(); </script>

DRAW A SEMI-CIRCLE

To create a semicircle with HTML5 Canvas, we can create an arc using the arc() method and define the ending angle has startAngle + PI.

DRAWING A SEMI-CIRCLE EXAMPLE


context.beginPath();context.arc(288, 75, 70, 0, Math.PI, false);context.closePath();context.lineWidth = 5;context.fillStyle = ‘red';context.fill();context.strokeStyle = '#550000';context.stroke();

</script>

LINEAR GRADIENTS

To create a linear gradient with HTML5 Canvas, use the createLinearGradient() method.

Linear gradients are defined by an imaginary line which defines the direction of the gradient.

Insert colors using the addColorStop property.

RADIAL GRADIENTS

To create a radial gradient with HTML5 Canvas, use the createRadialGradient() method.

Radial gradients are defined with two imaginary circles - a starting circle and an ending circle, in which the gradient starts with the start circle and moves towards the end circle.

PATTERNS

To create a pattern with the HTML5 Canvas, use the createPattern() method of the canvas context which returns a pattern object,

Set the fillStyle property to the pattern object, and then fill the shape using fill().

The createPattern() method requires an image object and a repeat option, which can be repeat, repeat-x, repeat-y, or no-repeat.

Unless otherwise specified, the repeat option is defaulted to repeat.

IMAGES

To draw an image using HTML5 Canvas, use the drawImage() method which requires an image object and a destination point.

The destination point defines the top left corner of the image relative to the top left corner of the canvas.

Since the drawImage() method requires an image object, first create an image and wait for it to load before instantiating drawImage().

This is accomplished by using the onload property of the image object.

TEXTUse the font property and the fillText() method of the canvas context.

To set the font, size, and style of HTML5 Canvas text, set the font property of the canvas context to a string containing the font style, size, and family, delimited by spaces.

The style can be normal, italic, or bold. unless otherwise specified, the font style is defaulted to normal.

Once the font property has been set, draw the text with the fillText() method, which requires a string and an x and y position.

DRAWING WITH THE HTML5 CANVAS

drawing with the html5 canvas

Education