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 Manipulation
 Animations
 Custom 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 path
2. 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 position
4. to make the line visible, apply a stroke to the line
using stroke()

DRAWING A LINE EXAMPLE
<script>
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
<script>
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.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
<script>
context.rect(188, 50, 200, 100);
context.fillStyle = 'yellow';
context.fill();
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
<script>
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 70;
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'green';
context.fill();
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
<script>
context.arc(288, 75, 70, 0, Math.PI, false);
context.closePath();
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.

TEXT
 Use 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

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (6)

Similar a Drawing with the HTML5 Canvas

Similar a Drawing with the HTML5 Canvas (20)

Más de Henry Osborne

Más de Henry Osborne (20)

Último

Último (20)

Drawing with the HTML5 Canvas