Getting started with the canvas in Javascript
I’ve spent the last year coding each and every day - trying to improve my Javascript skills and pivot away from working in the advertising industry to some kind of media arts career. It’s been tough, but I’ve made it. And learnt so much.
After a tonne of requests I’ve decided to write a series of posts about my processes and offer up some tips and tricks to get to the fun parts quicker.
But before we get there, let me make a disclaimer. I’m no coder, though I’ve dabbled in code since a kid. My day job has been in advertising for the past 15 years, and though code and art have often intersected, I still consider myself a novice and a StackOverflow lurker. Some of the things I do will most probably annoy a bunch of “real” coders.
I started learning Javascript just two years ago, and before that spent most of my Creative Coding time using Processing and before that Flash (For me, Flash was the perfect tool — equal parts visual design and code, before the coders kind of took it over and the interface, and syntax, became annoying and unusable for me).
So at the start of the year I embarked on #Code365 — to code a new piece of art each day. I had attempted this before, using Processing, during my Berlin days, but had failed miserably. Though I have the utmost respect for Processing and what it’s achieved, I never loved the how pedantic the language was, how slow it was to play your sketch, how difficult it was to publish on the web. P5.js has changed a lot if this, but it still felt a bit like a closed “black box” for me — separate from “real Javascript”. And like any new person starting out in JS, the language was already weird looking enough.
For #Code365 my intention was to get to the creating part as fast as possible. I made a rule, that I’ve mostly kept to, which was if I did something three times then it needed to be made into a function or a class. I started out the year coding in Sublime and now work in Atom, with Atom Live Server enabled which greatly speeds up my workflow and these days trying to be a bit neater in my coding (thanks Victor).
All the code and libraries for these tutorials can be found here: https://github.com/GeorgeGally/creative_coding
So firstly setting up a canvas is pretty repetitive, right. So this is what i do:
In a separate javascript file, canvas.js, I have this, which gives me a fullscreen canvas that is all ready to go:
// allows me global access to canvas and it’s width and height propertiesvar w, width, h, height;var canvas;
function createCanvas(canvas_name){canvas = document.createElement(‘canvas’);var body = document.querySelector(‘body’);canvas.setAttribute(“id”, canvas_name);canvas.style.position = "absolute";canvas.style.left = "0px";canvas.style.top = "0px";body.appendChild(canvas);var ctx = canvas.getContext(‘2d’);resize();window.addEventListener(“resize”, resize, false);return ctx;}
// this enables me to have many canvases// positioned on top of each other at 100% width and height of page
function resize(){var c = document.getElementsByTagName(‘canvas’);width = w = window.innerWidth;height = h = window.innerHeight;for(var i = 0; i < c.length; i++) {c[i].width = width;c[i].height = height;}console.log(“resize: “ + w +”:” + h);}
And then simple as that, in my main .js file I just call:
var ctx = createCanvas("someCanvasName");
…and booom! Now I never write code to create canvas ever again.
And if I want a hidden canvas, because I created a global canvas variable (which is really the last canvas created) I can just go:
var hidden_ctx = createCanvas("HiddenCanvasName");hidden_ctx.style.left = -w + "px";
But that would be too repetitive, so rather in my canvas.js file I have another function:
function createHiddenCanvas(canvas_name){var ctx = createCanvas(canvas_name)canvas.style.left = -w+"px";return ctx;}
And call it so…
var hidden_ctx = createHiddenCanvas("HiddenCanvasName");
And that’s pretty much it. Never think about creating a canvas again.
Next time I’ll show you some drawing tricks. Happy coding…
I’m deeply into minimalism, and sound and motion reactive systems, so this is the recurring theme of the last year’s exercise. If you want to see some of my #code365 output, have a look here: https://www.instagram.com/radarboy3000/
And see some of my personal projects here: http://www.radarboy.com
All the code and libraries can be found here: https://github.com/GeorgeGally/creative_coding
Here’s part 2…