html
html
1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<head>
<title>line </title>
</head>
<body>
<canvas id="canvas" width="600" height="400"> picture and shapes </canvas>
</body>
</html>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
#canvas{
width:100%;
border :2px solid black;
}
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
window.onload=function (){
var canvas=document.getElementById("canvas")
var context=canvas.getContext("2d")
context .moveTo(0,0)
context .lineTo(600,400)
context .stroke();
context .beginPath()
context .arc(300,200,100,0,2*Math .PI);
context .stroke();
context .fillStyle="green";
context .fill();
context .font='64px Arial';
context .fillStyle="blue";
context .fillText("Hello",100,100);
context .fillText("world",400,300);
}
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run