Generative canvas is fun (too)

โ€” Generative art, JavaScript

Quick post.
I created a simple generative doodle using the canvas with javascript, check it out:
» Canvas Doodle

It is based on this experiment by mr.doob. For me it was a challenge to finally do a canvas experiment. It is kinda fun, you don’t have to compile and the surprise is very big if it works, since you don’t have such a thing as compile errors ๐Ÿ™‚

A nice thing with the html-canvas is that you can set the line thickness to floats, where in actionscript you can only use an numbers that will be be rounded. That allows me to create nice thin lines. An annoying thing is that you have to use strings (with RGBA values) to define the color of the lines. Can this be a uint-value?
context.strokeStyle = ‘rgba(242, 43, 81, 0.8)’;
Another thing that I noticed, it’s is hard to blend two canvas contexts, you’ll have to do it pixel per pixel.

function merge(toContext, fromContext)
var imageData = fromContext.getImageData(0, 0, width, height);
var pixelData1 =;
var pixelData2 = toContext.getImageData(0, 0, width, height).data;

if (pixelData1.length != pixelData2.length) return;

for (var i = 0, total = pixelData1.length; i < total; i ++ ) { pixelData1[i] = (pixelData1[i] + pixelData2[i]) / 2; // ugly blend } toContext.putImageData(imageData, 0, 0); } [/as]This works. Yeah yeah, I know if I want a normal blend, I should grab the RGB values separately and mix them per channel, but this works in the experiment.. (!?) ๐Ÿ˜‰ I'm open for suggestions and optimization of this thing. Is there a Actionscript-like [i]BitmapData.draw()[/i] or [i]BitmapData.copyPixels()[/i] alternative for this?

5 responses to “Generative canvas is fun (too)”

  1. Gwen says:

    To merge 2 canvas elements u can use:

    c = destinationCanvas.getContext( ‘2d’ );
    c.drawImage( sourceCanvas, 0, 0, width, height, offsetX, offsetY, w, h );



  2. Mark Knol says:

    Hi Gwen, that is very helpful! Will try it out soon! I still find it hard to find a good documentation sources for javascript functions.

  3. Gwen says:

    Based on some recent experiments I find javascript to be a very loose language. It all kind of depends on what you want to achieve & how you want to optimize for performance and/or reusability… So it’s about finding your own way of doing things actually.

    These helped me along the way: (check the sources) (check the sources)
    – a lot of google

    Recommended reading:

    That should keep you busy ๐Ÿ˜‰


  4. Mark Gould says:

    hi Mark,

    I’m assuming from what you write and the comments that most (all?) of the code you’re posting here is considered open source? I don’t see any licensing information. I’m not much of a coder, although I can cut and paste and change variables in Processing, Actionscript and a few others.

    So really short of code I’m curious about the many wonderful actionscript UI generative works that you are posting. Can I screen grab what I’m drawing and use it?

    I very happily came across your site after seeing a few of your videos on youtube!



  5. Mark says:

    Hi Mark,

    The code I post on my blog is opensource. You are free to use it. If its for a commercial project, it would be nice to give something back, like a link, credits. When you earn millions, it would be fair to give me 10% ๐Ÿ˜› You are allowed to screen grab what your drawing (i think you mean this app ??) .

    Most of my artworks on flickr are for sale and have a Attribution-NonCommercial-ShareAlike Creative Commons licence.
    When still unsure or want some custom stuff, just mail me ๐Ÿ™‚

Say something interesting

Please link to code from an external resource, like