Helloworld!: Things You Can Do Using Canvas on HTML5

A brief about HTML5 and <canvas>

HTML5 is a markup language used for structuring and presenting content on the World Wide Web. It is the fifth and current version of the HTML standard, published on 2014. HTML 5 has some new features, like canvas and video audio. Here I would like to give an example what canvas can do on HTML5.

<canvas> on HTML5 is an element used to draw graphics, or objects on website using script. So, <canvas> is only the container to draw. To actually draw the graphics, we must use script, like JavaScript.

<canvas> has several methods to draw line, rectangle, circle, character/text, and adding image.

Below are examples of adding image onto canvas, creating stroke text, and displaying cursor position.

Let’s Try Canvas

Adding Image onto Canvas

<!DOCTYPE html>

<html>

<body>

<p>Image to be added on canvas:</p>

<img id="HTML5" src="HTML5.jpg" alt="HTML5canvas" width="220" height="277">

<p>Canvas:</p>

<canvas id="imgcanvas" width="250" height="300"

style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas>

<p>To add the image onto canvas, click <button onclick="imgcanvas()">HERE</button></p>

<script>

function imgcanvas() {

var c = document.getElementById("imgcanvas");

var ctx = c.getContext("2d");

var img = document.getElementById("HTML5");

ctx.drawImage(img,0,0);

}

</script>

</body>

</html>

Image to be added on canvas:

Canvas:

To add the image onto canvas, click

How does it work?

First we need an image to be added onto canvas. I take an image from internet. Actually, HTML.jpg is not the filename I took from the internet. I put HTML5.jpg to make it easier. You can put the link instead of HTML5.jpg if you want to try yourself. Then we need to set an id for the image so we can copy/'call' it later.

Then create a canvas as the container of the image. We also set an id for this canvas. If the browser doest support the HTML5 canvas tag, the message "Your browser does not support the HTML5 canvas tag." will be displayed.

Create a button so that when we press that button the image will be copied onto canvas.

We need a script to copy the image as the button pressed. I use JavaScript.

Let's see other examples

Stroke text :

code:

<!DOCTYPE HTML>

<html>

<head>

<style>

body {

margin: 0px;

padding: 0px;

}

</style>

</head>

<body>

var canvas = document.getElementById('strokecanvas');

var context = canvas.getContext('2d');

context.font = '40pt Calibri';

context.lineWidth = 3;

context.strokeStyle = 'blue';

context.strokeText('STROKE', 80, 110);

context.strokeText('TEXT', 80, 160);

</script>

</body>

</html>

Explanation :

The property of the canvas are:
id = stroke canvas
width = 578
height = 200
Then I use javascript to display stroke text.
The canvas is called, then I set size of the font. Next, setting the line width, followed color.
'STROKE', 80, 110 means it's located in cord x,y=80,110 as well as 'TEXT'

Displaying Cursor Position*

*Works only on PC
code :

<!DOCTYPE html>

<html>

<body>

function writeMessage(canvas, message) {

var context = canvas.getContext('2d');

context.clearRect(0, 0, canvas.width, canvas.height);

context.font = '18pt Calibri';

context.fillStyle = 'white';

context.fillText(message, 10, 25);

}

function getMousePos(canvas, evt) {

var rect = canvas.getBoundingClientRect();

return {

x: evt.clientX - rect.left,

y: evt.clientY - rect.top

};

}

var canvas = document.getElementById('mousecanvas');

var context = canvas.getContext('2d');

canvas.addEventListener('mousemove', function(evt) {

var mousePos = getMousePos(canvas, evt);

var message = 'Cursor pos: ' + mousePos.x + ',' + mousePos.y;

writeMessage(canvas, message);

}, false);

</script>

</body>

</html>

Okay that's all my post about <canvas> on HTML5. Thanks for visiting and see you on the next post!

Helloworld!

Pageviews from the past week

Monday, December 05, 2016

Things You Can Do Using Canvas on HTML5

No comments:

Post a Comment

Follower

About Me