DrawImage on Canvas HTML5 Error

Question

So when I try to draw image on canvas like this (it works fine):

<html>
    <head>
        <title>HTML5 canvas</title>
        <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
        <script>
            $(document).ready(start);
            var image1;
            function start() {
                var ctx = $('#canvas').get(0).getContext('2d');
                image1 = new Image;
                image1.src = "/arenag/arenagimg/BeastBear.jpg";
                image1.onload = function () {
                    ctx.drawImage(image1.src,200, 200, 100, 100);
                };
            }
        </script>
        <style type="text/css">
            #framework {
                border: 2px solid #000;
                width: 100%;
                text-align: center;
            }

            #canvas {
                background-color: #00FFE2;
                margin-right: auto;
                margin-left: auto;
            }
        </style>
    </head>
    <body>
    <div id="framework">
        <canvas id="canvas" width="1024" height="768"></canvas>
    </div>
    </body>
    </html>

Then i add a folder called imagefactory.js and create a class ImageFactory,and create function in that class called drawImage:

var ImageFactory = function (ctx) {
    this.ctx = ctx;
    this.drawImage = function (image_arg, image_x, image_y, image_w, image_h) {
        var _this = this;
        var image = new Image;
        image.src = image_arg;
        image.onload = function () {
            _this.ctx.drawImage(image.src, image_x, image_y, image_w, image_h);
        };
    };
};

Then I simply try to call that function in my main file:

<html>
<head>
    <title>HTML5 canvas</title>
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script>
        $(document).ready(start);
        var image;
        function start() {
            image = '/arenag/arenagimg/BeastBear.jpg';
            var ctx = $('#canvas').get(0).getContext('2d');
            var imageFactory=new ImageFactory(ctx);
            imageFactory.drawImage(image,200, 200, 100, 100);
            }

    </script>
    <style type="text/css">
        #framework {
            border: 2px solid #000;
            width: 100%;
            text-align: center;
        }

        #canvas {
            background-color: #00FFE2;
            margin-right: auto;
            margin-left: auto;
        }
    </style>
</head>
<body>
<div id="framework">
    <canvas id="canvas" width="1024" height="768"></canvas>
</div>
</body>
</html>

I get this error(on 36 line in my main (HTML) file where the canvas is) :

Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(HTMLImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap)'

And also this bug which is connected to the other one(i mean when there is no this bug then there is no the first bug too):

[object%20HTMLImageElement]:1 GET http://phpcasovi.dev/arenag/klase/[object%20HTMLImageElement] 404 (Not Found)

And i wanted to just give you a help to solve this : When i change var image = new Image; to var image = {}; in JS file.Then there is no bug but becuase var image is not equal to new Image well then there is no images at all.So i think bug is at that line where i say var image = new Image; but i dont know why there is a bug (why should it be)??

Answer 1

First argument for context.drawImage should be Image-Object not image.src

From docs , ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight); , image , An element to draw into the context . The specification permits any canvas image source ( CanvasImageSource ), such as an HTMLImageElement , an HTMLVideoElement , an HTMLCanvasElement or an ImageBitmap .

 var ImageFactory = function(ctx) { this.ctx = ctx; this.drawImage = function(image_arg, image_x, image_y, image_w, image_h) { var _this = this; var image = new Image(); image.src = image_arg; image.onload = function() { _this.ctx.drawImage(image, image_x, image_y, image_w, image_h); }; }; }; $(document).ready(start); function start() { var image = 'https://www.google.com/images/branding/googlelogo/1x/googlelogo_white_background_color_272x92dp.png'; var ctx = $('#canvas').get(0).getContext('2d'); var imageFactory = new ImageFactory(ctx); imageFactory.drawImage(image, 200, 200, 100, 100); }

 #framework { border: 2px solid #000; width: 100%; text-align: center; } #canvas { background-color: #00FFE2; margin-right: auto; margin-left: auto; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div id="framework"> <canvas id="canvas" width="1024" height="768"></canvas> </div>

DrawImage on Canvas HTML5 Error

Question

1 answers

solution1
2 ACCPTED 2016-06-27 09:41:51

Fiddle Demo

DrawImage on Canvas HTML5 Error

Question

1 answers

solution1 2 ACCPTED 2016-06-27 09:41:51

Fiddle Demo

solution1
2 ACCPTED 2016-06-27 09:41:51