In the above example we combined various elements like lineTo(), quadraticCurveTo() and bezierCurveTo() of canvas to create this random path.
Random shapes and paths can be created using HTML5 canvas by joining different elements of canvas like line and curves. Below is an example to create a path using canvas.
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#myCanvas {
border:1px solid #000000;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="400" height="350"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.lineWidth = 5;
context.strokeStyle = 'green'
context.beginPath();
context.moveTo(350, 70);
context.lineTo(200, 100);
context.quadraticCurveTo(100, 125, 200, 150);
context.bezierCurveTo(250, 175, 250, 200, 200, 250);
context.lineTo(125, 325);
context.stroke();
context.closePath();
context.strokeStyle = 'blue'
context.lineWidth = 5;
context.beginPath();
context.moveTo(325, 30);
context.lineTo(175, 75);
context.quadraticCurveTo(50, 125, 200, 175);
context.bezierCurveTo(225, 190, 225, 200, 175, 250);
context.lineTo(100, 325);
context.stroke();
</script>
</body>
</html>
The above code will produce the following result
Browse Plugins
Submitted Plugins
Tutorials
Sponsored Links
