javascript - DrawImage on Canvas HTML5 Error

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

<html>
    <head>
        <title>HTML5 canvas</title>
        <script src="//code.jquery/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/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 /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)??

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

<html>
    <head>
        <title>HTML5 canvas</title>
        <script src="//code.jquery./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./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)

Share Improve this question edited Jun 27, 2016 at 9:15 asked Jun 27, 2016 at 9:06 Silidrone 1,5904 gold badges21 silver badges38 bronze badges

What does new ImageFactory return ? Where is onload event ? – Rayon Commented Jun 27, 2016 at 9:12
@Rayon Why should it return anything ?? It's quest is to just draw an image.You can see onload event here : image.onload = function () { _this.ctx.drawImage(image.src, image_x, image_y, image_w, image_h); }; Little tip :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)?? – Silidrone Commented Jun 27, 2016 at 9:16
Can you share a fiddle ? – Rayon Commented Jun 27, 2016 at 9:23
@Rayon Just a moment – Silidrone Commented Jun 27, 2016 at 9:26
@Rayon Here : jsfiddle/d98q0bxg – Silidrone Commented Jun 27, 2016 at 9:35

Add a ment |

1 Answer 1

Sorted by: Reset to default 5

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./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./ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="framework">
  <canvas id="canvas" width="1024" height="768"></canvas>
</div>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - DrawImage on Canvas HTML5 Error - Stack Overflow

1 Answer 1

Fiddle Demo

与本文相关的文章

评论列表(0)