Menu
This keeps getting an error message saying that it is not a function please help!!
var ctx = document.getElementById('canvas').getContext('2d');
HTML:
<html>
<head>
<title>Canvas Race</title>
<script src="jquery-2.2.3.js"></script>
<style type="text/css">
canvas {
border: 1px solid black;
background-image: url("http://www.gamefromscratch.com/image.axd?picture=road2048v2.png");
background-size: 200px 300px;
background-position-y: -81px;
}
</style>
</head>
<body>
<div id="canvas">
<canvas id="myCanvas" width="1100" height="150" ></canvas>
</div>
<div id="winner"></div>
</body>
</html>
Javascript:
<script type="text/javascript">
var blueCar = new Image();
var redCar = new Image();
// images
function image(){
blueCar.src = "http://worldartsme.com/images/car-top-view-clipart-1.jpg";
redCar.src = "http://images.clipartpanda.com/car-clipart-top-view-free-vector-red-racing-car-top-view_099252_Red_racing_car_top_view.png";
window.requestAnimationFrame(draw);
}
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
ctx.globalCompositeOperation = 'destination-over';
//blue car
ctx.drawImage(blueCar, 10, 10, 100, 100);
}
image();
</script>
I've already searched around but I haven't found anything that works I don;'t know if it has to do anything with my jquery.
621
The getContext() function is the function that you use to get access to the canvas tags 2D drawing functions. As of April 2014, there are two types of context that are available to you: 2d and webgl . These provide you with the API that you use to draw on the canvas.
getContext() method returns a drawing context on the canvas, or null if the context identifier is not supported, or the canvas has already been set to a different context mode.
The "Cannot read property 'getContext' of null" error occurs when calling the getContext method on a null value. To solve the error, make sure the JS script tag is loaded after the HTML is declared and the id of the element exists in the DOM.
You were referencing a div with that id there... DIVs don't have a property method such as .getContext(), so here is the working part:
var blueCar = new Image();
var redCar = new Image();
// images
function image(){
blueCar.src = "http://worldartsme.com/images/car-top-view-clipart-1.jpg";
redCar.src = "http://images.clipartpanda.com/car-clipart-top-view-free-vector-red-racing-car-top-view_099252_Red_racing_car_top_view.png";
window.requestAnimationFrame(draw);
}
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
ctx.globalCompositeOperation = 'destination-over';
//blue car
ctx.drawImage(blueCar, 10, 10, 100, 100);
}
image();<html>
<head>
<title>Canvas Race</title>
<script src="jquery-2.2.3.js"></script>
<style type="text/css">
canvas {
border: 1px solid black;
background-image: url("http://www.gamefromscratch.com/image.axd?picture=road2048v2.png");
background-size: 200px 300px;
background-position-y: -81px;
}
</style>
</head>
<body>
<div id="mycanvas">
<canvas id="canvas" width="1100" height="150" ></canvas>
</div>
<div id="winner"></div>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With