JavaScript Canvas

JavaScript Canvas
Jagriti Srivastava

Intro..
Used to draw images
Came with HTML5 to draw 2d and 3d graphics
Used for games and visualization

How to start
Must have concept of HTML and basic Javascript
Steps to get started :
 1. Create canvas element with attributes – ID,
 HEIGHT and WIDTH
 2. Add Styles(*Optional)
 3.Get canvas element using ID
4. Get Canvas Context (2D or 3D)
 5. Draw using Context

Steps
1. Create Canvas
// index.html
<canvas id="myCanvas" width="800"
height="1200"></canvas>

Step 2 and 3
Add Styles
// styles.css
body {
background: #111;
color: #f8f8f8;
}
#myCanvas {
background: #f8f8f8;
padding: 0;
margin: 0 auto;
margin-bottom: 1rem;
display: block;
}

Step 3 and 4
Get canvas using Id and canvas context
var canvas =
document.getElementById("myCanvas");
var ctext = canvas.getContext("2d");

Step 5
**Draw using context **
ctext.beginPath();
ctext.moveTo(150,10);//moveTo(x,y) - defines the
starting point of the line
ctext.lineTo(20, 100);//lineTo(x,y) - defines the
ending point of the line
ctext.lineWidth = 5;
ctext.strokeStyle = "blue"; //color of the line
ctext.stroke(); // to provide ink to the line

<!DOCTYPE HTML>
<html>
<head>
<title> Canvas </title>
<style>
body { margin: 0px; padding: 0px; }
#myCanvas { border: 1px solid red; }
</style>
<script>
window.onload = function()
{
var canvas = document.getElementById("mCanvas");
var ctext = canvas.getContext("2d");
ctext.beginPath();
ctext.moveTo(150,10);//moveTo(x,y)
ctext.lineTo(20, 100);//lineTo(x,y)
ctext.lineWidth = 5;
ctext.strokeStyle = "blue"; //color of the line
ctext.stroke(); // to provide ink to the line
};
</script>
</head>
<body>
<canvas id="mCanvas" width="360" height="200"></canvas>
</body>
</html>

How to draw
Set the style -
1)Begin Path
2)Use functions and Coordinates
3)Draw the path to screen

JavaScript Canvas

More Related Content

Similar to JavaScript Canvas

More from jagriti srivastava

Recently uploaded

JavaScript Canvas