Yesterday we looked at getting the pixels out of a canvas context via ImageData. Today we’ll look at getting the pixels defined in an ImageData object and drawing them back to a canvas.
Essentially, it’s the same as getPixelData in reverse. You take an ImageData and call context.putImageData(imageData, x, y). Simple enough. The x and y determine where on your canvas the image data rectangle will be drawn. Note that this put function is very low level. It directly draws pixels and ignores any transforms, styles, or shadow definitions, etc.
Read more...One thing we haven’t covered yet is pixel level access to canvas. The good news is that this is indeed possible. The bad news is that it isn’t quite as straightforward as it is in Flash. But it’s not horrible.
Getting pixel values is not done directly on a canvas, but through an object called ImageData. You can get an ImageData object from any rectangular area of a canvas with the function canvas.getImageData(x, y, w, h). ImageData has three properties: data, which is an array of ints, and width and height, which are just the width and height you passed in when you called getImageData. The values in the data array are arranged in groups of four. Each four ints represent the red, green, blue, and alpha value of a single pixel. They are arranged from the left to right and top to bottom of the image. Thus imageData.data[0] would be the red value (0-255) of the top left pixel. imageData.data[1] would be the green value of the same pixel. imageData.data[4] would be the red value of the second pixel in the first row, and so on. Since this is not the easiest thing to hold in your mind, it’s useful to make a utility function that lets you pass in an imageData object and x, y position and returns you a color. Like so:
Read more...You know I like components. I’ve had it in the back of my mind since I started playing with JavaScript to try out making some minimalcomp type components in Canvas. This is a bit of a questionable endeavor. I mean, HTML has a pretty decent set of UI controls, right? But the pull was strong, and I finally gave in and at least made a rough attempt at a button. I think it’s pretty cool. I just threw this together in a couple of hours, so there’s likely a lot more that could be done with it, and possibly even some problems that need to be addressed. Nevertheless, it works pretty well for what it is.
Read more...Today we do a bit more with the mouse. In particular, interacting with existing objects on the canvas. If you are used to Flash, dealing with mouse interaction with canvas objects may come across as very counterintuitive. This is because there are no real canvas objects. A canvas is actually more akin to a simple bitmap in Flash. You can see stuff you’ve drawn on it, but they are just pixels. There is no concept of a display list like you have in Flash. So you can’t natively say that you want to be notified when the user clicks on this red circle over on the left side of the canvas.
Read more...OK, here’s something we’ve largely passed by: handling mouse interactions. Might be useful, eh?
HTML5 has various options to capture mouse and other events, and various ways of determining mouse coordinates. These vary in support across various browsers and platforms, meaning it can get a bit complex coding this stuff up on your own. This is where a framework like jQuery comes in real handy. It abstracts the various browser differences and gives you a uniform way of coding this stuff that should work on just about anything. Others probably know better than me how well it actually fulfills that promise, but I’ve had decent luck with it so far.
Read more...I think I’ve covered most of the large technical aspects of JavaScript and canvas that I will be covering for the month. I’ll probably finish up with a bunch of random experiments utilizing all the stuff we’ve covered up till now. But who knows, I might come up with another topic or two as we go along.
Today, we’ll create a kind of artsy network/node diagram that looks like this:
Read more...Just playing around with some generative type drawing today, using curves.
In Flash, you have moveTo and curveTo. In JavaScript, you have the exact two functions that work exactly the same way, creating a quadratic curve. But you also have bezierCurveTo, which is a nice addition.
To make a quadratic curve, moveTo a certain point, then call quadraticCurveTo(controlPointX, controlPointY, endPointX, endPointY) just like in Flash’s curveTo.
[php lang=“JavaScript”]context.beginPath();
context.moveTo(100, 100);
context.quadraticCurveTo(200, 0, 300, 100);
context.stroke();[/php]
A quick drive-by post today. I’m running out of content. Must… stretch… out… topics.
In Flash, since version 8, we’ve had a few different bitmap effects: shadows, blurs, glows.
Canvas at least has shadows built in. Very simple to use. Shadows are composed of four properties: offset (x and y), color, and blur. The only even slightly tricky one is color. By default, the shadow color is fully transparent black. So you won’t see it. You have to set context.shadowColor to something else in order to have a shadow appear at all.
Read more...Today we’ll look at the basics of transformations on a canvas. The way transformations work is you call one of several functions that changes the current transformation matrix on the context of the canvas. This does not change anything that has already been drawn. It only effects future drawing actions.
Canvas uses a basic 2D transformation matrix exactly the same as Flash does. There are two functions that allow you to change the matrix: transform() and setTransform(). These both take six params: a, b, c, d, tx, ty. The tx and ty are easiest to understand as they merely translate the coordinate system on the x, y axes. The a, b, c, d control rotation and scaling, shearing, or any combination of the above, depending on what values you set. I am not going to go into a lengthy discussion on transformation matrices, but I will say that if you want to use it to scale something, a and d control scale x and scale y, and if you want to rotate something by a particular angle A (in radians of course), use cos A, -sin A, sin A, cos A for a, b, c, d.
Read more...Today we’ll take a quick look at rendering text in canvas. It’s pretty simply. There are two main functions on canvas that cause text to be drawn: fillText(text, x, y) and strokeText(text, x, y).
You pass in a string and a position and you get text. Couldn’t be simpler. As you might expect, fillText will render the text with whatever fill style you have set on the context prior to calling it, and strokeText will respect whatever stroke style you have set on the context.
Read more...