Stroke Styles on canvas on HMTL5

This examples is how to stroke styles on canvas on HTML5:

Write HTML:

<canvas id="tutorial" width="400" height="400"></canvas>

Javascript:

var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');

ctx.lineCap = "square"; 

ctx.beginPath();
ctx.strokeStyle = '#FF0000';
ctx.lineWidth = 20;
ctx.moveTo(150,200);
ctx.lineTo(200,150);
ctx.lineTo(250,200);
ctx.stroke();

ctx.lineCap = "butt"; 

ctx.beginPath();
ctx.strokeStyle = '#00FF00';
ctx.lineWidth = 20;
ctx.moveTo(150,250);
ctx.lineTo(200,200);
ctx.lineTo(250,250);
ctx.stroke();   

ctx.lineCap = "round"; 

ctx.beginPath();
ctx.strokeStyle = '#0000FF';
ctx.lineWidth = 20;
ctx.moveTo(150,300);
ctx.lineTo(200,250);
ctx.lineTo(250,300);
ctx.stroke();
}

and CSS

canvas { border: 1px solid black; }

Result below:

21 Ridiculously Impressive HTML5 Canvas Experiments

HTML5 is the thing to talk about these day. Today, we have a collection of some ridiculously impressive HTML5 canvas-based experiments that will make you say, “Wow!” Let’s take a peek at some of the latest, cutting edge examples out there.


1. 8 Bit Color Cycle

HTML5 Examples

2. Particle Letter Animation

HTML5 Examples

3. Cloth Experiment

This is one of the best canvas-based experiments.

HTML5 Examples

4. Particle System

This is one of my favorites — absolutely amazing!

HTML5 Examples

5. Strange Attractors

This example generates beautiful fractals, like the ones generated by Apophysis. Be sure to tick the composite :) .


6. Canvas Nebula

HTML5 Examples

7. Bomomo

HTML5 Examples

8. Liquid Particles

HTML5 Examples

9. Sinous

This is a really fun game; is it not as easy as it looks!

HTML5 Examples

10. Water in HTML5

HTML5 Examples

11. Blob

HTML5 Examples

12. Magnetic System

HTML5 Examples

13. Trail

HTML5 Examples

14. Particles

HTML5 Examples

15. Shattering Box Physics Simulation

This incredible example depicts real world physics in action.

HTML5 Examples

16. Flower Power

Try to guess the word. :P

HTML5 Examples

17. 9Elements Particle Play

This is a beautiful example which demonstrates audio and canvas in action.

HTML5 Examples

18. Beauty of Maths

HTML5 Examples

19. Tree

HTML5 Examples

20. Cloth Simulation

HTML5 Examples

21. Arcade Fire

HTML5 Examples

So what do you think? Getting your own ideas for a neat canvas application? Well, now you have more than one reason to create HTML5 appsCodeCanyon just launched an HTML5 category! Have fun!

Copy from http://net.tutsplus.com/articles/web-roundups/21-ridiculously-impressive-html5-canvas-experiments/

8 Simply Amazing HTML5 Canvas and Javascript Animations

  • Tunnelers

    Processing to sketch out the animation and form, then rewrote it from scratch in Javascript / Canvas HTML5. Simply awesome and amazing!
  • The Mesmerizer

    A simple experiment with a 16×16 grid of squares. Moving the pointer over the squares causes colours to appear and bleed into adjacent squares with an effect that is quite mesmerizing. Try clicking the corner squares or typing on the keyboard for additional effects.
  • Burn

    A simple test of local pixel-based modifications of an HTML5 canvas drawing area. Hold a mouse button down for a “slide down” effect.
  • Cheloniidae Live

    This project is pure JavaScript, though it uses a library that dynamically recompiles JavaScript functions to implement operator overloading. (This is done inside the browser, not ahead-of-time.) Pretty fun, you can alter the code and make your own drawing!
  • Canvas 3D engine

    A 3D engine on canvas, currently supporting a collection of basic prefab shapes, textures, and basic interaction. Current work includes collada (import) support, and improved texture and lighting features.
  • Bomomo

    Best give it a try yourself… just use your mouse & mouse button! All of the sudden, I have become artistic. :)
  • DDD

    Move mouse to draw, drag to rotate. This one is pretty fun, you have to try to see it.
  • Plasma Tree

    Inspired by nature – a visual presentation of a algorithm

Source from http://www.queness.com

HTML5 Canvas

The canvas element is used to draw graphics on a web page.

Your browser does not support the canvas element.


What is Canvas?

The HTML5 canvas element uses JavaScript to draw graphics on a web page.

A canvas is a rectangular area, and you control every pixel of it.

The canvas element has several methods for drawing paths, boxes, circles, characters, and adding images.


Create a Canvas Element

Add a canvas element to the HTML5 page.

Specify the id, width, and height of the element:

<canvas id=”myCanvas” width=”200″ height=”100″></canvas>

 


Draw With JavaScript

The canvas element has no drawing abilities of its own. All drawing must be done inside a JavaScript:

<script type=”text/javascript”>
var c=document.getElementById(“myCanvas”);
var ctx=c.getContext(“2d”);
ctx.fillStyle=”#FF0000″;
ctx.fillRect(0,0,150,75);
</script>

Try it yourself »

JavaScript uses the id to find the canvas element:

var c=document.getElementById(“myCanvas”);

Then, create a context object:

var ctx=c.getContext(“2d”);

The getContext(“2d”) object is a built-in HTML5 object, with many methods to draw paths, boxes, circles, characters, images and more.

The next two lines draws a red rectangle:

ctx.fillStyle=”#FF0000″;
ctx.fillRect(0,0,150,75);

The fillStyle method makes it red, and the fillRect method specifies the shape, position, and size.


Understanding Coordinates

The fillRect method above had the parameters (0,0,150,75).

This means: Draw a 150×75 rectangle on the canvas, starting at the top left corner (0,0).

The canvas’ X and Y coordinates are used to position drawings on the canvas.

Mouse over the rectangle below to see the coordinates:

X
Y

More Canvas Examples

Below are more examples of drawing on the canvas element:

Example – Line

Draw a line by specifying where to start, and where to stop:

Your browser does not support the canvas element.

Try it yourself »

 

Example – Circle

Draw a circle by specifying the size, color, and position:

Your browser does not support the canvas element.

Try it yourself »

 

Example – Gradient

Draw a gradient background with the colors you specify:

Your browser does not support the canvas element.

Try it yourself »

 

Example – Image

Put an image on the canvas:

Try it yourself »

 


HTML5 <canvas> Tag

Tag Description
<canvas> Defines graphics

 

Complete Canvas 2d Reference

For a complete reference of all the attributes and methods that can be used with the canvas object, go to our complete canvas 2d reference.

Source from http://www.w3schools.com

Ping your blog, website, or RSS feed for Free Sitetag