HTML5 Image Draw and Controlling By Kamal Sharma

Requirements

Basic of JavaScript

HTML5 Canvas

The canvas element is part of HTML5 and provides ability to draw 2D shapes and

Creating and Using Canvas Element

Creating Canvas Element in HTML

<canvas id="canvas" width="

Creating Canvas Element in JavaScript

var canvas = document.createElement(

canvas.setAttribute('id','canvas'

canvas.setAttribute('width'

canvas.setAttribute('height'

document.body.appendChild(c

Using Canvas Element

var ctx = document.getElementById(

Example of Drawing Images on Canvas

img = new Image() ;

img.src = url ;

ctx.drawImage(img, x, y) ;

Create Image Draw Function, Store Properties and Access Properties

1

Draw and Controlling with Keyboard

The canvas element is part of HTML5 and provides ability to draw 2D shapes and

Creating and Using Canvas Element

Creating Canvas Element in HTML

"500px" height="500px"></canvas>

JavaScript

document.createElement('canvas') ;

'canvas') ;

'width','500px') ;

'height','500px') ;

document.body.appendChild(canvas) ;

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

Drawing Images on Canvas using JavaScript

Create Image Draw Function, Store Properties and Access Properties

with Keyboard

The canvas element is part of HTML5 and provides ability to draw 2D shapes and images.

Create Image Draw Function, Store Properties and Access Properties

2

function drawImage(image,x,y)

{

img = new Image() ;

img.src = url ;

ctx.drawImage(image, x, y) ;

}

JSON Data for Retrieving and Storing Image Properties

<script type="text/javascript">

var data=

{

'img1' :

{

'x' : 10,

'y' : 10,

'image' : 'images/tiki_user.png'

}

}

</script>

Accessing JSON Data in JavaScript

data['img1']['x'] ;

Implementation with Timer

Start Task Function works with Timer, this function will initialize and call on every tick of timer.

function startTask()

{

drawImage(data['img1']['x'], data['img1']['y'], data['img1']['image']) ;

}

Init Function will call first when document is loaded.

function init()

{

return setInterval(startTask, 10) ;

}

And call with

window.onload = function()

{

init() ;

}

See the screenshot look like blurry

Need to clear the previous data in canvas with clearRect() function.

// Clear the canvas

function clear()

{

ctx.clearRect(0, 0, 5

}

Moving Image with Keyboard

window.onkeydown - An event handler for the keydown event on the window

Syntax : window.onkeydown = function/functionRef ;

// Key Events

window.onkeydown = function

{

var keyCode = e.keyCode

// 37 - Left Arrow

if(keyCode == 37)

{

data['img1']['x'

}

// 39 - Right Arrow

if(keyCode == 39)

{

data['img1']['x'

}

}

3

look like blurry Image, drawImage function create image on every tick

Need to clear the previous data in canvas with clearRect() function. clearRect(x, y, width, height).

500, 500) ;

with Keyboard

An event handler for the keydown event on the window

window.onkeydown = function/functionRef ;

function(e)

e.keyCode || e.which || window.Event ;

'x'] -= 20 ;

'x'] += 20 ;

on every tick.

clearRect(x, y, width, height).

An event handler for the keydown event on the window

Left and Right Arrow update the x of image properties

When using arrow key also create new image

need to call the clear before beginning of drawImage. It will clear the canvas and draw new image

with updated x and y position.

Update the function

function startTask()

{

clear() ;

drawImage(data['img1'

}

Complete Source

<script type="text/javascript">

var data=

{

'img1' :

{

'x' : 10,

'y' : 10,

'image' : 'images/tiki_user.png'

}

}

</script>

<canvas id="canvas" width="800px"

<script type="text/javascript">

var ctx = document.getElementById(

function init()

{

setInterval(startTask,

}

// Clear the canvas

function clear()

{

ctx.clearRect(0

}

// Images Draw

function drawImage(x,y,url

4

Right Arrow update the x of image properties.

When using arrow key also create new image from current x and y position of data properties. So

need to call the clear before beginning of drawImage. It will clear the canvas and draw new image

'img1']['x'], data['img1']['y'], data['img1'

"text/javascript">

'images/tiki_user.png'

"800px" height="500px"></canvas>

"text/javascript">

document.getElementById('canvas').getContext('2d'

setInterval(startTask, 10) ;

0, 0, 500, 500) ;

x,y,url)

from current x and y position of data properties. So

need to call the clear before beginning of drawImage. It will clear the canvas and draw new image

'img1']['image']) ;

'2d') ;

5

{

img = new Image() ;

img.src = url ;

ctx.drawImage(img, x, y) ;

}

function startTask()

{

clear() ;

drawImage(data['img1']['x'], data['img1']['y'],

data['img1']['image']) ;

}

// Key Events

window.onkeydown = function(e)

{

var keyCode = e.keyCode || e.which || window.Event ;

// 37 - Left Arrow

if(keyCode == 37)

{

data['img1']['x'] -= 20 ;

}

// 39 - Right Arrow

if(keyCode == 39)

{

data['img1']['x'] += 20 ;

}

}

window.onload = function()

{

init() ;

}

</script>

Based on HTML5 Game Fun2hit - http://apps.facebook.com/fun-two-hit/