Round Corner (Playing Around)

Just playing around with the Round Corner and created an almost Rockstar-like logo look.

Line Join Canvas (Challenge: Recreate Assassins Creed Logo)

I have been following html5canvastutorials and came across the lineJoin tutorial I followed it as normal, but then something came to me. Wouldn't it be cool if I could recreate the Assassins Creed logo using the line join and other canvas tools? So I will challenge myself to try and make this happen and hopefully have it shown in a future post.

If you would also like to try and challenge yourself then I suggest you head on over to html5canvastutorials and give it a go, post on the comments if you complete it before me.

<canvas id="lineJoin" width="500" height="500"></canvas> <script> var canvas = document.getElementById("lineJoin"); var context = canvas.getContext("2d") // Set line width for all line context.lineWidth = 25; // Miter line join (left) context.beginPath(); context.moveTo(99, 150); context.lineTo(149, 50); context.lineTo(199, 150); context.lineJoin = "miter"; context.stroke(); </script>

Bezier Curve (Complete)

This is the Bezier Curve which is fantastic for creating more curvy drawings than when I used the Quadratic Curve. This is now fully finished and I think it is a lovely looking heart shape, much better than the previous version using quadratic curves.

Further Reading...

Bezier Curve

You can not view the Canvas element, please install a more up to date browser.

Bezier Curve (Work in Progress)

This is the Bezier Curve which is fantastic for creating more curvy drawings than when I used the Quadratic Curve. This is only half finished as I had the idea of making yet another heart as this one could (and I really hope so) look better than the previous heart shape which I felt was a bit pointy in places. I will be working on this to make a very curvy and lovely looking heart.

Further Reading...
Bezier Curve

You can not view the Canvas element, please install a more up to date browser.

Experimenting With Quadratic Curve

Just playing around with the quadratic curve tool to see just what it can do.

Further Reading...
Quadratic Curve tutorial.

"I Love You" Canvas drawing

I wanted to create a message using the canvas tool to challenge myself with the usage of both text and shapes. At first I didn't think it would be as simple as creating the "I", "<3" and "you" separately and then placing it anywhere I wanted. This is the first time I have actually looked into the canvas properly and I wish I had done this sooner as it's just so simple.

Look out for complicated canvas designs coming soon...

Further reading...
W3Schools Canvas tutorials
Create a heart shape using quadratic curves.

My first Canvas

This is my first canvas drawing, more to come soon. You will find games to play and fun animations/drawings all done using the new HTML5 canvas tool.
For more on the HTML5 canvas tool