Doing some serious down time. I've been forcing myself to really take it easy the last few weeks. I was sick, got better, and then suddenly really got sick.
I didn't really want to come back to the computer until I had a few days of what might be called good health. I'm still sick, don't get me wrong, but I'm at least well enough to post that I'm still on some downtime.
However, just to be me...
How to write a simple HTML5 Canvas web page.
HTML5 is pretty slick! The neatest thing that I can show and not take five years trying to explain it is how to use the HTML5 canvas.
First you need a basic HTML file with the magical canvas tag included. Here is an example of such an HTML file.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Canvas Example</title>
<script src="canvas.js" type="text/javascript"></script>
</head>
<body style="background: #fefeef">
<h3>Hi there!</h3>
<canvas width="400px" height="400px" id="paintingCanvas" style="border: thick solid teal">
Canvas not supported.
</canvas>
</h:body>
</html>
So as you can a pretty easy to understand HTML file. As you can see, this file alone does absolutely nothing. All the magic is in the canvas.js file. However, do note the DOCTYPE html tag, that is needed for most browsers to understand that the file is an HTML5 file.
So let's take a look at that instead.
window.addEventListener("load", function() {
var canvas, context, painting;
function init() {
canvas = document.getElementById("paintingCanvas");
if (canvas == null) return;
context = canvas.getContext("2d");
if (context == null) return;
painting = false;
context.strokeStyle = "#00f";
context.lineWidth = 3;
context.font = "15px Helvetica";
}
init();
canvas.addEventListener("mousedown", function(ev) {
painting = true;
context.beginPath();
context.moveTo(ev.offsetX, ev.offsetY);
}, false);
canvas.addEventListener("mousemove", function(ev) {
updateReadout(ev.offsetX, ev.offsetY);
if (painting) {
paint(ev.offsetX, ev.offsetY);
}
function updateReadout(x, y) {
context.clearRect(0, 0, 100, 20);
context.fillText("x: " + x + ", y: " + y, 5, 15);
}
function paint(x, y) {
context.lineTo(ev.offsetX, ev.offsetY);
context.stroke();
}
}, false);
canvas.addEventListener("mouseup", function() {
painting = false;
context.closePath();
}, false);
}, false);
So that should be obvious to anyone who's ever worked in javascript, but just in case, here's the breakdown.
The first part adds a function that contains all our logic to the webpage's "load" trigger. In other words, the code within will fire as soon as the page is loaded. The first things we do is create a canvas, context, and painting variable. The canvas var will hold the location of the canvas tag which we will be using to grab a context from. The context var is the handle to the browser system resource for the 2d context, aka, that's what we are really going to be drawing to. The painting var will act as a Boolean var telling us if we should be painting or not when we move the mouse.
Pretty simple stuff and if you've ever used Java's AWT then you might have noticed how similar this all looks to AWT.
We create a function within called init. It gets the canvas tag, pulls the context from the tag (we use a simple test to make sure that this did happen for each step), set the painting flag to false, and store some states to the context. (Basically, a state is something you set and it stays that way until you change it again.)
After creating that function, we call it.
Finally, we add some event listeners to the canvas tag, because you cannot add listeners to a context. On the mouse down event, we set the painting flag to true, we tell the context "to put the pen down on the paper" at the current mouse position.
On the mouse move event we update the readout (which prints out the current mouse coordinates) and if the painting flag is on, we tell the pen to move to the current mouse coordinates.
On the mouse up event we turn off the painting flag and tell the pen to be "picked up."
That's it! Pretty simple stuff. Save the two files, open the HTML file in a nice browser (aka, not Internet Explorer) and poof!
 |
| Master Artist, I am not. |
Pretty simple and fast HTML5 canvas demo! Ta-da!
No comments:
Post a Comment