Christian Heilmann

Posts Tagged ‘canvas’

A web in HTML5 canvas

Tuesday, February 21st, 2012

Whenever there is an open forum to discuss HTML5, you get very interesting questions. Sometimes you also get ones you just facepalm to. One of them was yesterday on Facebook where someone wanted a “simple web in HTML5”. As I was bored watching “revenge of the sith” I thought I give it a go. So here you go – a simple web in HTML5 canvas.

How is this done? Pretty simple actually, I just define one segment of the web in canvas:

var c = document.createElement( 'canvas' ),
    cx = c.getContext( '2d' ),
    angle = 0;
document.body.appendChild( c );
c.width = c.height = 400;
cx.lineWidth = 3;
cx.translate( 200, 200 );
cx.moveTo( 0, 0 );
cx.lineTo( -30, -200 );
cx.quadraticCurveTo( 0, -170, 30, -200 )
cx.lineTo( 0, 0 );
cx.moveTo( -25, -160 );
cx.quadraticCurveTo( 0, -140, 25, -160 )
cx.moveTo( -18, -120 );
cx.quadraticCurveTo( 0, -100, 18, -120 )
cx.moveTo( -12, -80 );
cx.quadraticCurveTo( 0, -60, 12, -80 )
cx.moveTo( -6, -40 );
cx.quadraticCurveTo( 0, -30, 6, -40 )
cx.stroke();

I translate the context of the canvas to the centre of the 400×400 pixel canvas and start painting the lines. I paint one line from 200/200 (which now is 0/0 as the translation happened) to – 30/- 200 which is the top left. I then paint a quadratic curve to the top right of the segment (30,-200) with the curve point being in between the two. I then move the canvas “pencil” to the other points on the left and draw quadratic curves to their counterparts. All of these I set with trial and error – I am sure there is a clever algo to do this, but this works.

In order to achieve the web effect all I had to do was to rotate the canvas before painting each segment. I increased the angle by 18 degrees on each iteration and rotated the canvas in radians:

var c = document.createElement( 'canvas' ),
    cx = c.getContext( '2d' ),
    angle = 0;
document.body.appendChild( c );
c.width = c.height = 400;
cx.lineWidth = 3;
cx.translate( 200, 200 );
for ( angle = 0; angle <= 360; angle += 18 ) {
  cx.save();
  cx.rotate( angle * Math.PI/180 );
  cx.moveTo( 0, 0 );
  cx.lineTo( -30, -200 );
  cx.quadraticCurveTo( 0, -170, 30, -200 )
  cx.lineTo( 0, 0 );
  cx.moveTo( -25, -160 );
  cx.quadraticCurveTo( 0, -140, 25, -160 )
  cx.moveTo( -18, -120 );
  cx.quadraticCurveTo( 0, -100, 18, -120 )
  cx.moveTo( -12, -80 );
  cx.quadraticCurveTo( 0, -60, 12, -80 )
  cx.moveTo( -6, -40 );
  cx.quadraticCurveTo( 0, -20, 6, -40 )
  cx.restore();
}
cx.stroke();

And that’s that – a web in HTML5 canvas.

Animating with canvas and creating CSS3 animations with JavaScript

Monday, September 5th, 2011

Yesterday we went to a cool park in Krakow, Poland where they have all kind of physics experiments for kids (and me):

Physics Park exhibits

One of the things that always fascinated me was the optical illusion of non-concentric circles turning into a 3D cone. Take the following picture:

non-concentric circles

And then rotate it and you see what I mean (video on screenr).

Now, coming back (like any other kid) I wanted to recreate this for myself, and it is actually pretty easy in HTML5 canvas. If you get the embed below, then click the play button to see the result.

Check the source code. In essence all you do is paint a number of concentric circles with alternating black and white colouring and you decrease their radius. Instead of keeping the centre of the circles the same you move it back forth with a sine wave.

The animation works simply by rotating the canvas around the centre – no need to calculate the rotation in the loop.

This is what also ailed me about this: as the main image doesn’t change and we simply rotate the canvas, there is no need for the painting loop in the animation. Although the performance seems to be fine (at least here on this Macbook Air), I am pretty sure that the animation without the calculated circles will be smoother and less resource hungry. That’s why I painted the circles in one canvas and copy it into the animated one as an image. You can see the two canvases (the painting one in lighter grey) in this demo. Again, if you get the embed below, then click the play button to see the result.

The next step was to take the advice that everybody tells you right now and think about CSS animation as it is hardware accelerated and much better (citation needed, but that is the impression that I get). As all I am doing is to rotate a canvas around itself, it seems to be a good idea to do that. So, in the next example I animate with CSS and only use canvas for painting:

Smooth! I like it. What I don’t like is that now it does nothing in Opera for example. The other thing that annoys me is that the CSS is ridiculously verbose as I have to repeat all the animation information and keyframes for each browser with different prefixes.

That’s why I wanted to see if I can use CSS animation when it is supported and create the animation on the fly. That can be done but it is not that easy. Check out the result.

This seems to work nicely, try it in Opera and in other browsers to see the differences and get information what kind of animation was used. If I used transformation instead of animation it would even be easier. As it stands now, you can’t access, create and change keyframes that easily. this post has some more info on the issue and Joe Lambert did another showcase. Makes you wonder if we shouldn’t create an easier bridge between JS and CSS animations.

Creating screengrabs from HTML5 video with Canvas

Friday, July 1st, 2011

Lately I’ve been playing a lot with canvas and video and see what can be done with it to do things that are tough to do to videos on your own computers. One thing I found really annoying is that it is tough to do screen grabs of videos. In the past it was impossible (before video cards allowed you to capture flash content with screenshots) and even now it is a pain.

If you offer an online video that is HTML5, it is pretty simple to use canvas to allow end users to download images of your video. I’ve written a demo that does exactly that – it takes a snapshot of a video and adds its name and time stamp to the snapshot. Users then can download the snapshot as a PNG.

screengrabs with canvas

Here’s a quick tutorial on how it is done (also available on YouTube)

You can see the code in action or fork and grab the source on GitHub.

The only annoyance is that because of security concerns (cross domain origin) you can not grab images from videos not hosted on the same servergrab frames from videos not on the same server but you are not allowed to save them out as images. In Firefox you can save a canvas as an image, but it doesn’t work cross-browser it seems.

Creating Commodore 64 style logos in Canvas

Tuesday, June 21st, 2011

The year is 1993 and a young me spends quite some time in front of a Commodore 1901 colour screen, a C-64 and use Amica Paint V1.8 with my trusty Competition Pro Joystick to set and delete pixels.

One of the things I did a lot was fonts for scrollers and logo effects, like the ones here:

c64 fonts

Fast forward to 2000 – a bit less younger me got his first PC and used Star Commander to move some of these fonts over to the PC to bring them on to the web. By now I develop in Perl and I write an online tool that allows you to create logos using the fonts:

logo-o-matic

A few years later, I re-wrote the generator in PHP. Well, seeing the very cool C64 yourself Canvas demo I thought I should now have a go at creating a pure client side version.

So here we go – check out Canvas Logo-O-Matic and get the source on GitHub

canvas logo-o-matic

The way it works is described very well in this Canvas image cropping tutorial and I heavily documented the logogen.js file for you.

Basically the trick is to write a JSON map of all the char data – where a char starts and how wide it is and then crop it out of a single sprite sheet top copy one after the other into the Canvas.

TTMMHTM: Email clients survey, Disney Steampunk, RFID luggage, search interfaces, Wave protocol open sourced and a great colour schemer

Thursday, July 30th, 2009

Things that made me happy this morning: