//1)Style tag goes in header
<style>
canvas{ border: 1px solid black; }
</style>
//2)Add following to body tag
<canvas id="myCanvas" ></canvas>
//3)add following to top of Script tag
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.canvas.width = 500;
ctx.canvas.height = 250;
//4) add following to script tag
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "gray";
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
//5 controls speed of animation - smaller number the faster
setInterval(draw, 10);
//6) draw Circle to screen
ctx.beginPath();
ctx.
arc(100,
100,
40,
0,
Math.
PI*2,
false);//40 is the size ctx.fillStyle = "green";
ctx.fill();
ctx.closePath();
//END
Ly8xKVN0eWxlIHRhZyBnb2VzIGluIGhlYWRlciAgICAgCjxzdHlsZT4KICAgICAgICBjYW52YXN7IGJvcmRlcjogMXB4IHNvbGlkIGJsYWNrOyB9CiAKICAgICAgICA8L3N0eWxlPgoKLy8yKUFkZCBmb2xsb3dpbmcgdG8gYm9keSB0YWcKCjxjYW52YXMgaWQ9Im15Q2FudmFzIiAgPjwvY2FudmFzPgoKLy8zKWFkZCBmb2xsb3dpbmcgdG8gdG9wIG9mIFNjcmlwdCB0YWcKCiAgIHZhciBjYW52YXMgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgibXlDYW52YXMiKTsKICAgIHZhciBjdHggPSBjYW52YXMuZ2V0Q29udGV4dCgiMmQiKTsKICAgICAgICBjdHguY2FudmFzLndpZHRoICA9IDUwMDsKICAgICAgICBjdHguY2FudmFzLmhlaWdodCA9IDI1MDsKIAogLy80KSBhZGQgZm9sbG93aW5nIHRvIHNjcmlwdCB0YWcKIGZ1bmN0aW9uIGRyYXcoKSB7CiAgICAgICAgICAgIGN0eC5jbGVhclJlY3QoMCwgMCwgY2FudmFzLndpZHRoLCBjYW52YXMuaGVpZ2h0KTsKICAgICAgICAgICAgIGN0eC5maWxsU3R5bGUgPSAiZ3JheSI7CiAgICAgICAgICAgIGN0eC5maWxsUmVjdCgwLCAwLCBjYW52YXMud2lkdGgsIGNhbnZhcy5oZWlnaHQpOwogCn0KCi8vNSBjb250cm9scyBzcGVlZCBvZiBhbmltYXRpb24gLSBzbWFsbGVyIG51bWJlciB0aGUgZmFzdGVyCnNldEludGVydmFsKGRyYXcsIDEwKTsKCgovLzYpIGRyYXcgQ2lyY2xlIHRvIHNjcmVlbgogICAgICAgIGN0eC5iZWdpblBhdGgoKTsKICAgICAgICBjdHguYXJjKDEwMCwgMTAwLCA0MCwgMCwgTWF0aC5QSSoyLCBmYWxzZSk7Ly80MCBpcyB0aGUgc2l6ZQogICAgICAgIGN0eC5maWxsU3R5bGUgPSAiZ3JlZW4iOwogICAgICAgIGN0eC5maWxsKCk7CiAgICAgICAgY3R4LmNsb3NlUGF0aCgpOwoKLy9FTkQ=
Main.java:2: error: class, interface, or enum expected
<style>
^
Main.java:3: error: class, interface, or enum expected
canvas{ border: 1px solid black; }
^
Main.java:14: error: class, interface, or enum expected
var ctx = canvas.getContext("2d");
^
Main.java:15: error: class, interface, or enum expected
ctx.canvas.width = 500;
^
Main.java:16: error: class, interface, or enum expected
ctx.canvas.height = 250;
^
Main.java:19: error: class, interface, or enum expected
function draw() {
^
Main.java:21: error: class, interface, or enum expected
ctx.fillStyle = "gray";
^
Main.java:22: error: class, interface, or enum expected
ctx.fillRect(0, 0, canvas.width, canvas.height);
^
Main.java:24: error: class, interface, or enum expected
}
^
Main.java:31: error: class, interface, or enum expected
ctx.beginPath();
^
Main.java:32: error: class, interface, or enum expected
ctx.arc(100, 100, 40, 0, Math.PI*2, false);//40 is the size
^
Main.java:33: error: class, interface, or enum expected
ctx.fillStyle = "green";
^
Main.java:34: error: class, interface, or enum expected
ctx.fill();
^
Main.java:35: error: class, interface, or enum expected
ctx.closePath();
^
14 errors