Exploring Canvas

Exploring Canvas

Kevin Hoyt
khoyt@adobe.com
Twitter, AIM,YIM: parkerkrhoyt
http://blog.kevinhoyt.com

Agenda
• Getting started
• Charting
• Drawing
• Interaction
• Painting
• Animation

Using the Canvas Tag
<canvas id="chart" width="150" height="150">
Current stock price: $3.15 +0.15
</canvas>

<canvas id="clock" width="150" height="150">
<img
src="imagesclock.png"
width="150"
height="150"/>
</canvas>

Rendering Context
var canvas = document.getElementById( 'canvas' );
var context = null;

if( canvas.getContext )
{
context = canvas.getContext( '2d' );
// Drawing code here
} else {
// Unsupported code here
}

Coordinate Space
0
0 X

y
x

height
width
Y

Drawing Paths
context.beginPath();

context.arc( 75, 75, 50, 0, Math.PI * 2, true );
context.moveTo( 110, 75 );
context.arc( 75, 75, 35, 0, Math.PI, false );

// context.closePath();
context.stroke();
// context.fill();

Understanding Lines
(0, 0) (0, 0)
(3, 1) (3.5, 1)

(3, 5) (3.5, 5)
1.0 width 1.0 width

Caps, Joints and Miters

butt round width / 2
round bevel x limit
square miter from joint

Styles and Colors
fillStyle
strokeStyle

orange
#FFA500
rgb( 255, 165, 0 )
rgba( 255, 165, 0, 1 )

Gradients

// Start point and stop point
// Controls angle/direction of gradient
var fill = context.createLinearGradient( 0, 0, 0, 50 );

// 0 - 1 relative to gradient range
fill.addColorStop( 0, ‘#FFFFFF’ );
fill.addColorStop( 0.5, ‘#FFA500’ );

// Apply the fill style
context.fillStyle = fill;
context.fillRect( 0, 0, 50, 50 );

Gradients
// Inner circle point and radius
// Outer circle point and radius
// Not necessarily a single point
var fill = context.createRadialGradient(
95, 15, 15,
102, 20, 40
);

// 0 - 1 relative to gradient range
fill.addColorStop( 0.5, ‘#FFA500’ );

// Apply the fill style
context.fillStyle = fill;
context.fillRect( 0, 0, 50, 50 );

Text and Shadows
var ctx = null;

if( canvas.getContext )
{
ctx = canvas.getContext( '2d' );

ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
ctx.shadowBlur = 2;
ctx.shadowColor = 'rgba( 0, 0, 0, 0.5 )';

ctx.font = '20px Times New Roman';
ctx.fillStyle = 'black';
ctx.fillText( 'Sample String', 5, 30 );
}

Tracking Points

What’s clickable?
How do you know?
Canvas vs DOM...

Curves

Quadratic Curve Cubic Curve

Load From Server
var ctx = canvas.getContext( '2d' );
var img = null;

$( '#make' ).click( function( evt ) {
img = new Image();
img.onload = function() {
ctx.drawImage( img, 0, 0 );
};
img.src = 'images/backdrop.png';
} );

Other Canvas
var canvas = document.getElementById( 'lines' );

ctx.beginPath();
ctx.moveTo( 30, 96 );
ctx.lineTo( 70, 66 );
ctx.stroke();

canvas = document.getElementById( 'canvas' );
ctx = canvas.getContext( '2d' );

$( '#lines' ).click( function( evt ) {
ctx.drawImage( this, 0, 0 );
} );

Embedded Data

var img = null;

$( '#embed' ).click( function( evt ) {
img = new Image();
img.src = 'data:image/png;base64,iVB...';
ctx.drawImage( img, 0, 0 );
} );

Pixel Pushing

context.drawImage(
myImg,
frame.x,
frame.y,
frame.width,
frame.height );

Pixel Slicing
context.drawImage(
myImg,
frame.x,
frame.y,
frame.width,
frame.height,
22,
21,
frame.width,
frame.height );

Tweening
JSTweener.addTween( position, {
time: 3,
transition: 'easeOutExpo',
x: end.x,
y: end.y,
onUpdate: function() {
context.clearRect( 0, 0, 640, 480 );
// Draw updates to sprites
},
onComplete: function() {
position = null;
start = null;
end = null;
}
} );

Questions?

Kevin Hoyt
khoyt@adobe.com
Twitter, AIM,YIM: parkerkrhoyt
http://blog.kevinhoyt.com

Exploring Canvas

More Related Content

What's hot (20)

Similar to Exploring Canvas (20)

Recently uploaded (20)

Exploring Canvas

Editor's Notes