Simple drawing in HTML5
Drawing in HTML5 is basically using JavaScript to draw lines, figure,charts and to color in an area using set equations and functions. The best part is the end result will fool the user to think that its an image 🙂
All that is needed is a
- Canvas element,
- JavaScript knowledge(even if you know C,C++ and basic English language 🙂 )
- Some creative intent or just for a sake of fun try something
What Tools Are at Your disposal?
Drawing tools/pre-functions which can be used
- Rectangles
- Arcs- can also be used to draw Circles-context.arc()
- Paths and line drawing
- Bezier and quadratic curves
Effects which can be used on Objects
- Fills and strokes
- Shadows
- Linear and radial gradients
- Alpha transparency
- Compositing
Transformations on Objects
- Scaling
- Rotation
- Translation
- Transformation matrix
Getting data in and out
- Loading external images by URL, other canvases or data URI
- Retrieving a PNG representation of the current canvas as a data URI
More Info on this can be found at the W3C site.
<!DOCTYPE html>
<html>
<head>
<title>Canvas Drawing</title>
<!–[if IE]><script src=”excanvas.js”></script><![endif]–>
<script type=”text/javascript”>
window.onload = function() {
var drawingCanvas = document.getElementById(‘myDrawing’);
// Check the element is in the DOM and the browser supports canvas
if(drawingCanvas && drawingCanvas.getContext) {
// Initaliase a 2-dimensional drawing context
var context = drawingCanvas.getContext(‘2d’);
// Create the yellow face
context.strokeStyle = “#000000”;
context.fillStyle = “#FFFF00”;
context.beginPath();
context.arc(100,100,50,0,Math.PI*2,true);
context.closePath();
context.stroke();
context.fill();
// Add 2 blue eyes
context.strokeStyle = “#000000”;
context.fillStyle = “#FFFFFF”;
context.beginPath();
context.arc(80,80,8,0,Math.PI*2,true);
context.closePath();
context.stroke();
context.fill();
context.fillStyle = “#000066”;
context.beginPath();
context.arc(80,80,5,0,Math.PI*2,true);
context.closePath();
context.fill();
context.strokeStyle = “#000000”;
context.fillStyle = “#FFFFFF”;
context.beginPath();
context.arc(120,80,8,0,Math.PI*2,true);
context.closePath();
context.stroke();
context.fill();
context.fillStyle = “#000066”;
context.beginPath();
context.arc(120,80,5,0,Math.PI*2,true);
context.closePath();
context.fill();
// Create the triangle-shaped nose
context.fillStyle = “#000000”;
context.beginPath();
context.moveTo(93,100);
context.lineTo(100,93);
context.lineTo(107,100);
//context.lineTo(100,107);
context.closePath();
context.fill();
// Add the smile
context.strokeStyle = “#000000”;
context.beginPath();
context.moveTo(70,110);
context.quadraticCurveTo(100,150,130,110);
context.quadraticCurveTo(100,150,70,110);
context.closePath();
context.stroke();
}
}
</script>
</head>
<body>
<canvas id=”myDrawing” width=”200″ height=”200″>
<p>Your browser doesn’t support canvas.</p>
</canvas>
</body>
</html>
You may also like
HTML 5 APIs explained
PHP – AJAX