title: DrawImage on Canvas HTML5 Error
body: <p>So when I try to draw image on canvas like this (it works fine):    </p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;HTML5 canvas&lt;/title&gt;
          &lt;script src="//code.jquery.com/jquery-1.11.0.min.js"&gt;&lt;/script&gt;
          &lt;script&gt;
              $(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);
                  };
              }
          &lt;/script&gt;
          &lt;style type="text/css"&gt;
              #framework {
                  border: 2px solid #000;
                  width: 100%;
                  text-align: center;
              }
  
              #canvas {
                  background-color: #00FFE2;
                  margin-right: auto;
                  margin-left: auto;
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
      &lt;div id="framework"&gt;
          &lt;canvas id="canvas" width="1024" height="768"&gt;&lt;/canvas&gt;
      &lt;/div&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p>Then i add a folder called imagefactory.js and create a class ImageFactory,and create function in that class called drawImage:</p>
  
  <pre><code>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);
          };
      };
  };
  </code></pre>
  
  <p>Then I simply try to call that function in my main file:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;HTML5 canvas&lt;/title&gt;
      &lt;script src="//code.jquery.com/jquery-1.11.0.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;
          $(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);
              }
  
      &lt;/script&gt;
      &lt;style type="text/css"&gt;
          #framework {
              border: 2px solid #000;
              width: 100%;
              text-align: center;
          }
  
          #canvas {
              background-color: #00FFE2;
              margin-right: auto;
              margin-left: auto;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="framework"&gt;
      &lt;canvas id="canvas" width="1024" height="768"&gt;&lt;/canvas&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I get this error(on 36 line in my main (HTML) file where the canvas is) : </p>
  
  <pre><code>Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(HTMLImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap)'
  </code></pre>
  
  <p>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):</p>
  
  <pre><code>[object%20HTMLImageElement]:1 GET http://phpcasovi.dev/arenag/klase/[object%20HTMLImageElement] 404 (Not Found)
  </code></pre>
  
  <p>And i wanted to just give you a help to solve this : When i change <code>var image = new Image;</code>to <code>var image = {};</code>in JS file.Then there is no bug but becuase <code>var image</code> is not equal to <code>new Image</code> well then there is no images at all.So i think bug is at that line where i say <code>var image = new Image;</code> but i dont know why there is a bug (why should it be)?? </p>