Welcome Guest! (App Version 3.1)

websitnero logo name

Canvas

Canvas introduction in HTML5

Canvas is the first of the two ways of implementing graphs and charts in JavaScript. By using canvas you can literally draw items and put them in the Web Page. Canvas makes use of JavaScript to draw items, lines, circles, etc. By making using of Canvas utility you can draw graphs from simple lines to beautiful Images. Though, the code would get a bit complex but this feature opens the door to do the task solely using Web Technologies and not relying or making use of any 3rd party tool. Browsers, alone can render the JavaScript code and provide you with beautiful charts, images, or other graphic outputs.

Following example is to draw a line in canvas:

Example

<canvas id="canvas1" height="200px" width="200px" style="border:1px solid #000"></canvas> 

<script>
  var c = document.getElementById("canvas1");
  var ctx = c.getContext("2d");
  ctx.moveTo(10,10);
  ctx.lineTo(150,150);
  ctx.stroke();
</script> 

Following example is to draw a circle in canvas:

Example

<canvas id="canvas1" height="200px" width="200px" style="border:1px solid #000"></canvas>

<script>
  var c = document.getElementById("canvas1");
  var ctx = c.getContext("2d");
  ctx.beginPath();
  ctx.arc(100,100,50,0,2*Math.PI);
  ctx.stroke();
</script> 

Following example is to draw a hollow text in canvas:

Example

<canvas id="canvas1" height="200px" width="200px" style="border:1px solid #000"></canvas>

<script>
  var c = document.getElementById("canvas1");
  var ctx = c.getContext("2d");
  ctx.font = "20px Comic Sans MS";
  ctx.fillText("Hi Dexter!", 30, 30);
</script> 
WebsiteNero is highly optimized for learning various website developing technlogies. We try our best to add maximum modules and examples to help learn the concepts clearly and vividly. We try to present all content and examples as simple as we can removing any complexity to hurdle easy understanding. We try best provide you with worthful content, but we cannot guarantee full correctness of all the content on this site. While using this website, you agree to have read and accepted all our terms of use and conditions, cookie, and privacy policy. Copyright, 2013-2018 by websitenero.com. All Rights Reserved.