The canvas element is used to draw paths, boxes, circles, characters, and adding images on a web page by using javascript,
the <canvas> element is only a container for graphics. You must use a script to actually draw the graphics.
Draw a red rectangle, a gradient rectangle, a multicolor rectangle, and some multicolor text onto the canvas:
example:
<body><canvas id="myCanvas" width="200" height="100"></canvas>
<script type="text/javascript">
var myCanvas=document.getElementById("myCanvas");
var myCanvas=myCanvas.getContext("2d");
myCanvas.fillStyle="#13a3ff";
myCanvas.fillRect(0,0,150,75);
</script>
</body>
Canvas - Gradients
<body>
<canvas id="myCanvas" width="400" height="300"></canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"#0b90c1");
grd.addColorStop(1,"#1e6d8a");
// color
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
</script>
</body>
Canvas - Text
<body>
<canvas id="myCanvas" width="400" height="300"></canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="32px Arial";
ctx.fillText("Just Effects",100,100);
</script>
</body>
Canvas - Line
<body>
<canvas id="myCanvas" width="578" height="500"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(100, 550);
context.lineTo(350, 50);
context.stroke();
</script>
</body>
HTML5 Canvas Text Font, Size, Text Align, Text Color and Style
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.font = 'bold 48pt arial';
context.fillStyle = '#156f90';
context.textAlign = 'center';
context.fillText('Justeffects!', 150, 100);
</script>
</body>
Canvas Rotate Transform
<body>
<canvas id="myCanvas" width="700" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var rectWidth = 200;
var rectHeight = 50;
// translate context to center of canvas
context.translate(canvas.width / 2, canvas.height / 10);
// rotate 45 degrees clockwise
context.rotate(Math.PI / 6);
context.fillStyle = '#156f90';
context.fillRect(rectWidth / -10, rectHeight / -10, rectWidth, rectHeight);
</script>
</body>
