Is canvas faster than a normal image?
So If I have for example an image like this:
Will it load faster if its written in JS, in canvas? Or is it faster to have it in PNG or JPG or GIF?
That depends on your network latency, and for images of nontrivial size, on the bandwidth available both on your server's end and on the user's end. High latency and low bandwidth would increase the odds that a canvas-based solution would be faster.
Canvas-based image drawing speed also varies drastically betweeen browsers. Here are some fairly outdated results:
Since then Chrome has advanced 4 versions, the Firefox team has put a lot of work into performance in Firefox 4, and IE9 has arrived with hardware acceleration. But it can give you an idea of the variability at least.