13

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.

Angel
  • 161
  • 1
  • 1
  • 9
  • 1
    Do you have a canvas element whose id="canvas"? – ray May 12 '16 at 22:59
  • yes i do i have it all set up already – Angel May 12 '16 at 23:04
  • 1
    Is your document loaded at the time this code is running? (If your script is in the head of the document and it's not running as part of a ready handler, your canvas element doesn't exist yet.) – ray May 12 '16 at 23:07
  • yes, do you want me to post the code? – Angel May 12 '16 at 23:09
  • 1
    That would be helpful. – ray May 12 '16 at 23:10
  • re posted the code check it out – Angel May 12 '16 at 23:21
  • Where in the document is your ` – Phil May 12 '16 at 23:41
  • Possible duplicate of [Why does jQuery or a DOM method such as getElementById not find the element?](http://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) – Phil May 12 '16 at 23:42
  • the script is after the closing html tag – Angel May 12 '16 at 23:58
  • 3
    The canvas id is `myCanvas` not `canvas`. Putting the script tag after the closing HTML tag is bad (to be avoided) Scripts should be in between the head or body tags. Place the script after the content (canvas) but before the closing body tag. Should start the script via the onload event. Script tags do not require the type="text/javascript" . The images may not have loaded in your code (when it works). Start the animation after they have loaded or `if(blueCar.complete){ctx.drawImage(blueC...` You need requestAnimationFrame at the end of the draw function if you want to animate – Blindman67 May 13 '16 at 00:21
  • I didn't even notice the id's thanks i got it working now i just needed it to display – Angel May 13 '16 at 00:50

1 Answers1

13

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>
Bekim Bacaj
  • 5,707
  • 2
  • 24
  • 26