canvas is null and canvas.getContext is not a function - javascript

I am busy working through this tutorial in which a 2D game is created using Javascript and the canvas element and I am having trouble with two errors.
My initial code was this:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Game Canvas Workshop</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
canvas {
background: #eee;
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<canvas id"myCanvas" width="480" height="320"></canvas>
<!-- <script type="text/javascript" src="../game.js"></script> -->
<script>
//var test = document.getElementsByTagName("canvas");
//console.log(test);
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
console.log(ctx);
ctx.beginPath();
ctx.rect(20, 40, 50, 50);
ctx.fill();
ctx.closePath();
</script>
</body>
</html>
When I try to grab the canvas element using document.getElementById it returns the error: canvas is null
So I changed the code to get the canvas element using document.getElementsByTagName and then wrote a test to print the result to the console and it returned the element.
But then when I try to use canvas.getContext("2d") I get the following error: canvas.getContext("2d") is not a function
I've read most of the answers to similar queries and tried them out with my code but they don't seem to work for me.
Please help.

Problem is here (missing "=" )
<canvas id"myCanvas" width="480" height="320"></canvas>
Change to:
<canvas id="myCanvas" width="480" height="320"></canvas>
Full code
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Game Canvas Workshop</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
canvas {
background: #eee;
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="480" height="320"></canvas>
<!-- <script type="text/javascript" src="../game.js"></script> -->
<script>
//var test = document.getElementsByTagName("canvas");
//console.log(test);
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
console.log(ctx);
ctx.beginPath();
ctx.rect(20, 40, 50, 50);
ctx.fill();
ctx.closePath();
</script>
</body>
</html>

You need
<canvas id="myCanvas" width="480" height="320"></canvas>
^
an assignment for the id.
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
//console.log(ctx);
ctx.beginPath();
ctx.rect(20, 40, 50, 50);
ctx.fill();
ctx.closePath();
* { padding: 0; margin: 0; }
canvas { background: #eee; display: block; margin: 0 auto; }
<canvas id="myCanvas" width="480" height="320"></canvas>

Please load your <script> after <body>. then this would work.
<body>
<input type="text" id="myInput" >
<canvas id="myCanvas" width="200" height="100"></canvas>
</body>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
</script>

Related

put html canvas at the top left of page

I have the following html file:
<canvas id="myCanvas" width="1440" height="800" style="border:0px solid #d3d3d3;"></canvas>
<body style="background-color:#FF0000;">
<script>
var canvas = document.getElementById('myCanvas')
let ctx = canvas.getContext('2d')
ctx.beginPath()
ctx.fillStyle = "#00FF00"
ctx.fillRect(0, 0, 2400, 2000) // background
ctx.stroke()
</script>
which produces a page that looks like this:
Notice that the canvas begins slightly below and to the right of the top left corner. How can I place it exactly at the top left corner?
Add margin: 0; padding: 0; to the body and it will place the canvas to the top-left.
Use position position:absolute; top: 0; left: 0;.
<canvas id="myCanvas" width="1440" height="800" style="border:0px solid #d3d3d3;position:absolute; top: 0; left: 0;"></canvas>
<body style="background-color:#FF0000;">
<script>
var canvas = document.getElementById('myCanvas')
let ctx = canvas.getContext('2d')
ctx.beginPath()
ctx.fillStyle = "#00FF00"
ctx.fillRect(0, 0, 2400, 2000) // background
ctx.stroke()
</script>
Try this on your css
*{
padding:0;
margin:0;
}
body{
background:#00FF00;
}
canvas{
position: absolute;
top: 0;
left: 0;
}

How do I change the 'x' and 'y' of a canvas?

When I create a canvas I can only change the width and height. What piece of code would I use to change the x and y position of the canvas?
Look how far left it is how do I make it more in the middle?
I have tried adding x and y to the canvas but to no avail.
Here is some of the code I uses for the canvas.
<html>
<canvas id="ctx" width="250" height="250" style="border:5px solid #000000"></canvas>
<script>
var ctx = document.getElementById("ctx").getContext("2d");
ctx.font = '50px Arial';
ctx.fillText('Hello',70,135);
</script>
</html>
Wrap your canvas tag one container(div) and add text-align: center
<html>
<div style="text-align:center;">
<canvas id="ctx" width="250" height="250" style="border:5px solid #000000"></canvas>
</div>
<script>
var ctx = document.getElementById("ctx").getContext("2d");
ctx.font = '50px Arial';
ctx.fillText('Hello',70,135);
</script>
</html>
This can be done with the margin-left CSS-property.
var ctx = document.getElementById("ctx").getContext("2d");
ctx.font = '50px Arial';
ctx.fillText('Hello',70,135);
#ctx {
margin-left: 100px;
}
<canvas id="ctx" width="250" height="250" style="border:5px solid #000000"></canvas>
In order to center the canvas, you could use the following code:
var ctx = document.getElementById("ctx").getContext("2d");
ctx.font = '50px Arial';
ctx.fillText('Hello',70,135);
html, body {
margin: 0;
width: 100%;
height: 100%;
}
#canvas-wrapper {
display:flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
<div id="canvas-wrapper">
<canvas id="ctx" width="250" height="250" style="border:5px solid #000000"></canvas>
</div>
<html>
<center>
<canvas style='position:absolute;left:150px;top:5px;border:5px solid #000000' id="ctx" width="250" height="250"></canvas>
</center>
<script>
var ctx = document.getElementById("ctx").getContext("2d");
ctx.font = '50px Arial';
ctx.fillText('Hello',70,135);
</script>
</html>

How do I change X-Y positions of an circle on a canvas

I'm trying out canvas for the first time. After creating a circle I want to be able to change the position of the center of this circle at the click of a button. But I am unable to figure how to do so. Can someone suggest a method for it?
#button{
height: 25px;
width:125px;
border: 1px solid black;
text-align: center;
cursor: pointer;
}
<html>
<head></head>
<body>
<div id="button" onclick="changePosition()">Click here</div>
<canvas id="testCanvas" width="500px" height="500px"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("testCanvas");
var a = canvas.getContext("2d");
a.fillStyle = "#b22222";
a.beginPath();
a.arc(100,100,25,0,2*Math.PI);
a.fill();
function changePosition(){
//what do I put here??
}
</script>
</body>
</html>
You need to redraw the scene. Create a function that resets the canvas and then draws the circle
var canvas = document.getElementById("testCanvas");
var ctx = canvas.getContext("2d");
var circlePos = {
left: 100,
top: 100,
}
function renderCircle( circlePos ) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "#b22222";
ctx.beginPath();
ctx.arc(circlePos.left, circlePos.top, 25, 0, 2 * Math.PI);
ctx.fill();
}
function changePosition() {
circlePos.left += 10;
if ( circlePos.left > canvas.width ) {
circlePos.left = 0;
}
renderCircle( circlePos );
}
changePosition();
#button {
height: 25px;
width: 125px;
border: 1px solid black;
text-align: center;
cursor: pointer;
}
<button onclick="changePosition()">Click here</button>
<canvas id="testCanvas" width="500" height="200"></canvas>

Rotate one Image on Center of another Image using javascript or jQuery

Hello I am lilbit new to Javascript and Jquery.
i want to move earth(image) around sun(image) but i dont want to use any jQuery-plugin.
I have tried few Option but it is not working.
So If there is anyway(i guess it is) then plz answer.
Thanks in Advance
<html>
<head>
<style type="text/css">
body {
background-color: ivory;
}
canvas {
position:absolute;
left:15%;
top:5%;
margin-left:center;
margin-top:center;
background-color:black;
border:1px solid red;
}
#Aditya{
position:relative;
top:25%;
left:20%;
}
</style>
<script type="text/javascript" src="js/Jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var canvas = document.getElementById("icanvas");
var ctx = canvas.getContext("2d");
var radianAngle = 0;
var cx = 400;
var cy = 400;
var radius = 230;
var img = document.getElementById("myearth");
img.height="5px";
img.width="5px";
img.onload = start;
function start() {
animate();
}
function animate() {
requestAnimationFrame(animate);
// Drawing code goes here
radianAngle +=Math.PI / 120;
ctx.clearRect(0, 0, canvas.width, canvas.height);
// draw the image rotated around the circumference
ctx.save();
ctx.translate(cx, cy);
ctx.rotate(radianAngle);
ctx.drawImage(img, radius - img.width / 2, -img.height/2);
ctx.restore();
}
});
</script>
</head>
<body>
<canvas id="icanvas" width="800px" height="800px">
<img src="earth.jpg" alt="earth" id="myearth" width="50%" height="50%"></img>
<img src="sun.jpg" alt="Sun" id="Aditya"></img>
</canvas>
</canvas>
</body>
sorry for delay to upload code.only earth is moving into canvas.dont know how to put sun in center.
Thank you all to showing interest.But i finally did it.perhaps you would like to see.
<html>
<head>
<style type="text/css">
body {
background-color: ivory;
}
canvas {
position:absolute;
left:15%;
top:5%;
margin-left:center;
margin-top:center;
background-color:black;
border:1px solid red;
}
.sunimg{
position:absolute;
left:40%;
top:40%;
}
</style>
<script type="text/javascript" src="js/Jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#Aditya").addClass("sunimg");
var canvas = document.getElementById("icanvas");
var ctx = canvas.getContext("2d");
var radianAngle = 0;
var cx = 400;
var cy = 400;
var radius = 230;
var img = document.getElementById("myearth");
img.height="5px";
img.width="5px";
img.onload = start;
function start() {
animate();
}
function animate() {
requestAnimationFrame(animate);
// Drawing code goes here
radianAngle +=Math.PI / 120;
ctx.clearRect(0, 0, canvas.width, canvas.height);
// draw the image rotated around the circumference
ctx.save();
ctx.translate(cx, cy);
ctx.rotate(radianAngle);
ctx.drawImage(img, radius - img.width / 2, -img.height/2);
ctx.restore();
}
});
</script>
</head>
<body>
<canvas id="icanvas" width="800px" height="800px">
<img src="earth.jpg" alt="earth" id="myearth" width="50%" height="50%"></img>
</canvas>
<img src="sun.jpg" alt="Sun" id="Aditya"></img>
</body>

canvas.height is not changing for IE9

In Java script I am changing the height and width of the HTML5 canvas. It works in Mozila, Chrome, opera and safari, But it is not working in IE9. Can any body tell me what I am doing wrong, do I need to set any property?
Thanks in advance
UPDATE:-
HTML:-
<body onload="Load();">
<canvas id="myCanvas" width="500" height="300"></canvas>
</body>
Javascript:-
function Load(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext('2d');
img=new Image();
img.src= "data:image/bmp;base64,"+respObj.respData; //Adding bmp image header
img.onload = function(){
canvas.width = 300;
canvas.height = 500;
context.clearRect(0, 0, canvas.width, canvas.height);
context.drawImage(img,0,0,canvas.width, canvas.height);
}
}
CSS:-
.canvas{
height: auto;
width: auto;
margin : 0px 35px;
border:1px solid black;
position: relative;
}
Try the following code. It is working in IE9, Firefox, Chrome :
<!DOCTYPE html>
<html>
<style language="css/text">
.canvas{
height: auto;
width: auto;
margin : 0px 35px;
border:1px solid black;
position: relative;
}
</style>
<body onload="Load();">
<canvas id="myCanvas" width="500" height="300"></canvas>
<input type="button" onClick="change()"/>
</body>
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext('2d');
function Load(){
img=new Image();
//img.src= "data:image/bmp;base64,"+respObj.respData; //Adding bmp image header
canvas.width = 300;
canvas.height = 500;
context.fillStyle="#FF0000";
context.fillRect(0, 0, canvas.width, canvas.height);
//context.drawImage(img,0,0,canvas.width, canvas.height);
}
function change() {
canvas.width = 100;
canvas.height = 100;
context.fillStyle="#FF0000";
context.fillRect(0, 0, canvas.width, canvas.height);
}
</script>
</html>
I found the issue with my canvas. It was the issue with style. I have removed the height and width setting from the style script. Because of it, the canvas height and width was overriding to its default values i.e. 150 and 300 as height and width respectively.

Categories