I am reading something at the library and the link is dead so I wanted to retry making a java canvas... well here
indow.addEventListener('load', eventWindowLoaded, false);
function eventWindowLoaded() {
canvasApp();
}
function canvasApp() {
var theCanvas = document.getElementById('my_first_canvas');
var my_canvas = theCanvas.getContext('2d');
my_canvas.strokeRect(0, 0, 200, 225)
// to start, draw a border around the canvas
//draw face
my_canvas.beginPath();
my_canvas.arc(100, 100, 75, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);
// circle dimensions
my_canvas.strokeStyle = "black"; // circle outline is black
my_canvas.lineWidth = 3; // outline is three pixels wide
my_canvas.fillStyle = "yellow"; // fill circle with yellow
my_canvas.stroke(); // draw circle
my_canvas.fill();
my_canvas.closePath();
// now , draw left eye
my_canvas.fillStyle = "black";
my_canvas.beginPath();
my_canvas.arc(65, 70, 10, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);
// circle dimstions
my_canvas.stroke(); // draw circle
my_canvas.fill(); //fill in circel
my_canvas.closePath();
// now the right eyes
my_canvas.beginPath();
my_canvas.arc(135, 70, 10, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);
// circle dimstions
my_canvas.stroke(); // draw circle
my_canvas.fill(); //fill in circel
my_canvas.closePath();
// draw smile
my_canvas.lineWidth = 6;
my_canvas.beginPath();
my_canvas.arc(99, 120, 35, (Math.PI / 180) * 0, (Math.PI / 180) * -180, false);
// semicircle dimensions
my_canvas.stroke();
my_canvas.closePath();
// Smiley speaks!
my_canvas.fillStyle = "black";
my_canvas.font = '5000px _sans';
my_canvas.fillText("Hello Canvas!", 45, 200);
} <canvas width="10000" heigth="55500" id="my_first_canvas">
Your browsers does not support HTML5 canvas. Try using Chrome,Firefox,Safari or MS Edge.
</canvas>but ruing it only show all the way up the smile did I miss spell something... I been look at this page for about 2 hours now i had done this over a week ago and just read that I massing the html element go being fg
This is a better practice
var theCanvas = document.getElementById('my_first_canvas');
theCanvas.width = window.innerWidth;
theCanvas.height = window.innerHeight;
In the HTML, you spelled height wrong. It worked for me after that.
<canvas width="10000" height="5600" id="my_first_canvas">
Your browsers does not support HTML5 canvas. Try using Chrome,Firefox,Safari or MS Edge.
</canvas>