When you use Popcorn Maker, you get a suite of events that let you do some really fun things with video and audio on the web. We've got a plugin that lets you type in some text and place it wherever you desire. There's a plugin that lets you create a Google Map and a plugin that lets you add an image. Put these all together, and you can do some really cool stuff.
But what if you could draw a picture?
The HTML5 specification includes a new element called canvas. Canvas is basically a readable/writable area for displaying graphics on a webpage. The element can be accessed and manipulated with JavaScript, allowing for the creation of some really, really cool things.
I decided that it was about time someone showed the power of having a plugin + editor combination for Popcorn Maker that allowed the user to draw anything they desired with their mouse. I wasn't about to go all out and design some feature complete drawing suite, but I did want to have some flexibility in what could be done for the initial release. With these goals in mind, I began.
To begin, I had to figure out how to work with canvas. I had used it on several occasions, but I have been shielded from the actual canvas API by Processing.js for the most part. I created a small HTML page with a canvas, and set up a small script that I'd work on to get drawing with a mouse working.
The most important functions I needed when it came to working on canvas were:
- getContext( type ) - where you pass in either "2d" or "3d" to get the actual drawing context of the element. The following functions are all methods on the return object of this function.
- moveTo( x, y ) - Set the starting point of a new path to x, y
- beginPath() - begin a drawing path at the last point specified by moveTo()
- lineTo( x, y ) - connect current position to x, y by a staight line
- stroke() - draws the line on the canvas that was made with lineTo
From there, I needed to figure out the relationship between the drawing editor in Popcorn Maker and the plugin for Popcorn.js. What I didn't want was to have the plugin editable from inside a saved project, but have it be editable from within Popcorn Maker.
Turned out this would be easier than I'd thought, since Popcorn Maker editors can easily access the canvas object I would create in the plugin code. All I'd have to do is apply the code above to the canvas object when an editor for a draw event is opened.
My next challenge, was to figure out how to save the image data. I was aware that the canvas element had a toDataUrl() function that could export the canvas to its PNG representation in Base 64 encoding. A simple search on the net showed me that I could create an Image object in JS and load in the data URL, then write the image to my canvas with the drawImage() method.
After hooking all of that up, I could now focus on adding some customizations to what could be drawn. The most obvious options were the weight of the line being draw (i.e. how thick it is) and the colour of the line. Stroke weight was easily implemented by changing the lineWidth property and a slider to control it, and colour was done using the strokeStyle attribute and a colour input element (unimplemented in Firefox D''':).
I've set up a persistent (for now) server on my site to serve the new feature for you to try out.
Just head over to draw.chrisdecairos.ca and try it out!
If you don't have a browser that supports Popcorn Maker or canvas, get a better browser. Seriously, it's 2013, not 2003.