Antelope Love Fan

Today we’re going to learn how to manipulate the HTML <canvas> element at the pixel level.

To start, we need a canvas element:

<canvas id=”canvas” width=”640″ height=”480>”
<p>Your browser doesn’t support canvas.</p>
</canvas>

Next get a handle to the canvas element and its 2d context.

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

Next, we create a ImageData element on the canvas that covers the entire canvas. This is we’re actually going to be drawing our pixels on.

var imgd = ctx.createImageData(canvas.width, canvas.height);

The ImageData element is basically just a big array. Each block of 4 array elements corresponds to a single pixel.

The array indices in each pixel block control the color and alpha transparency as follows:

• i = Red value
• i+1 = Green value
• i+2 = Blue value
• i+3 = Alpha

And here’s a simple function for drawing a single pixel given an x,y value and r,g,b:

var setPixel = function(imageData, point, r, g, b, a) {
    a = typeof a == 'undefined' ? 255 : a;
    i = (point.x + point.y * imageData.width) * 4;

    imageData.data[i  ] = r;
    imageData.data[i+1] = g;
    imageData.data[i+2] = b;
    imageData.data[i+3] = a;
};

Let’s say we wanted to draw a red pixel at 100,100. Given the ImageData element we declared above, we’d call setPixel like this:

setPixel(imgd, {x:100,y:100}, 255, 0, 0);

Notice we’re not passing a value for the alpha transparency. The setPixel defaults the alpha to fully opaque if a value is specified.

A more full-featured setPixel function can be found here. This version accepts HTML hex codes for colors and extends the Object prototype so we call it directly on the ImageData element like this:

imgd.setPixel({x:100,y:100}, ‘#f00’);

Here’s a sample that draws a Sierpinski triangle using the chaos game

One of the great things about jQuery is that it’s very easy to extend and has a great plugin ecosystem.

Today, we’re going to create a very simple jQuery plugin which will change the border color of an element.

Step 1: Protect the global scope

The first thing to do is wrap your plugin code in an anonymous function that calls itself so we don’t pollute the global scope.

(function($) {

})(jQuery);

Now any variables we declare inside that function will only exist within the local scope.

We also pass the main jQuery object to our function. This allows us to use the $ object even when jQuery is running in noConflict mode.

Step 2: Create our plugin function and make sure it’s chainable

We going to add a function called borderize to the jQuery object.

(function($) {
    $.fn.borderize = function(opts) {
        return this.each( function() {
        });
    };
})(jQuery);

The return this.each(); is important because it allows our plugin to be chainable by returning the object the function is being called on.

That means we’ll be able to do things like this:

$(‘#Foo’).borderize().css(‘width’, ’500px’);

Step 3: Setup some default options for the plugin but allow the end-user to change them.

We set our default border color to red. If borderize() is called without any arguments, the border color will still be red.

(function($) {
    $.fn.borderize = function(opts) {
        return this.each( function() {
            var settings = {
                borderColor: '#00ff00'
            };

            if(typeof opts == 'object') {
              $.extend(settings, opts);
            }
        });
    };
})(jQuery);

We use the $.extend function to update our settings object with any options the user might pass in.

$('#Foo').borderize( { borderColor: '#000' } );

In the above, we’re passing in black for the border color. $.extend will overwrite the value of borderColor in settings with the value passed in via opts

Step 4: Make the plugin actually do something

Now that the scaffold of our plugin, we add a call to $.css to actually change the border color of the passed in object.

(function($) {
    $.fn.borderize = function(opts) {
        return this.each( function() {
            var settings = {
                borderColor: '#00ff00'
            };

            if(typeof opts == 'object') {
              $.extend(settings, opts);
            }

            $(this).css('border', '1px solid ' + settings.borderColor);
        });
    };
})(jQuery);

Step 5: A final demo

Here’s a working jsfiddle demo

Here’s a short list of the Chrome extensions that I use all day, every day.

MeasureIt!

Web Developer

HTML Validator

Google Analytics Debugger

And let’s also not forget the Chrome Developer Tools that are built into Chrome. Once you turn on XMLHttpRequest logging, it can do everything Firebug does.