ctx.stroke()
advertisement
Creating an interactive multimedia content in HTML
Initial HTML web page
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
background-color: gray;
}
#myCanvas {
border: 1px solid #9C9898;
}
</style>
</head>
<script>
function createhouse()
{
alert('house is created!');
}
</script>
<body>
<canvas id="myCanvas" width="600" height="400"></canvas> <br>
<button type="button" width="70" height="20" onclick="createhouse()" style="border:2px solid
#4AA;">Create a house</button>
</body>
</html>
Defining a Canvas element
It is an element used to drawing all the graphics (lines, rectangles, ellipse, images, … ) on the fly, as a
white board.
<canvas id=" myCanvas " width="[value]" height="[value]" style="border:1px solid #ff0000;">
Your browser does not support the HTML5 canvas tag.
</canvas>
Drawing on the canvas
Drawing graphics on the canvas element previously defined as “myCanvas”
Drawing Graphics
All the following steps should be part of a JavaScript:
1. get the canvas element
var c=document.getElementById("myCanvas");
2. get the context of the canvas in order to draw the graphics
var ctx=c.getContext("2d");
3. start of a new graphic element
ctx.beginPath();
4. draw one element which is suitable
a. rectangle shape:
ctx.rect(x, y, width, height);
b. or a line
starting position:
ctx.moveTo(0,0);
ending position:
ctx.lineTo(200,100);
c. or an arc shape:
ctx.arc(x, y, radius , [starting angle]*Math.PI, [ending angle]*Math.PI);
5. define the color
ctx.fillStyle= ’rgb(0,0,255)’;
6. apply the color for the rectangle
ctx.fill();
7. draw filled color to the rectangle
ctx.fillRect(x,y,width,heigth);
8. define line color to the rectangle
ctx.strokeStyle=’rgb(0,0,255)’;
9. define line width to the rectangle
ctx.lineWidth=[number from 1-20];
10. draw the line to the rectangle
ctx.stroke();
Drawing Image
For drawing an image after the following step 3 follows the code below:
var imageObj = new Image();
imageObj.onload = function() {
//use for drawing the complete image
context.drawImage(imageObj, x, y);
//or for drawing only part of an image
context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY,
destWidth, destHeight);
};
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
For drawing complex shapes it can be used combinations of lines, images, arcs…
Interaction with the canvas elements
To interact with the canvas element we can use addEventListener to capture the user events like: mouse
movements, mouse clicks and keyboard strokes.
Mouse click
Simple example of calling the JavaScript function getmouseclick(event) when left mouse button is
clicked:
function getmouseclick(event)
{
//enter your action here.
//example: draw a new rectangle, clear rectangle, etc….
}
var c=document.getElementById("myCanvas");
c. addEventListener(“click”, getmouseclick,false);
For more advanced mouse events functions follow the link:
https://developer.mozilla.org/en/docs/DOM/element.addEventListener
Key stroke
In order to capture the keyboard strokes r, g, b, we should call this function from the body of the html
file:
<body onkeypress=”keystroke(event)” >
Javascript function:
function keystroke(event)
{
//detect the key stroked
if (event.keyCode == ‘114’) then
//change the roof color of the house to RED i.e. create a new roof with new color.
//114 = keystroke: r
//103 = keystroke: g
//97 = keystroke: b
}
Canvas transformations
To clear a region or the whole canvas, use the following JavaScript command at the step 3:
ctx.clearrect(x,y,w,h);
Saving the canvas as an image your local hard disk
var canvas = document.getElementById('myCanvas');
var im1= canvas.toDataURL();
Translation
ctx.translate(x,y);
Scaling
ctx.scale([value from 0-1], [value from 0-1]);// scale along the x axis and y axis,
Rotation
ctx.rotate(angle);
ctx.rotate(Math.PI / 4);//rotate 45 degrees
Create Video Element
The video element can use absolute location of a local video, or an online url video.
The condition for watching the video is the video codec to be AVC, webm, ogg.
<video width="320" height="240" controls>
<source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Dynamic video element creation in HTMl5
var v=document.createElement('video');
v.src="http://www.w3schools.com/html/movie.mp4";
v.controls =true;
document.body.appendChild(v);
Examples
HTML web page
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
background-color: gray;
}
#myCanvas {
border: 1px solid #9C9898;
}
</style>
</head>
<script>
function createhouse()
{
alert('house is created!');
}
</script>
<body>
<canvas id="myCanvas" width="600" height="400"></canvas> <br>
<button type="button" width="70" height="20" onclick="createhouse()" style="border:2px solid
#4AA;">Create a house</button>
</body>
</html>
Complex shape
A triangle in JavaScript:
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(0, 0);
context.lineTo(0, 100);
context.lineTo(100, 0);
context.closePath();
context.lineWidth = 5;
context.fillStyle =’rgb(0,0,255)’;
context.fill();
context.strokeStyle = ’rgb(0,100,255)’;
context.stroke();
