CODEWITHSUNDEEP
javascripthtmlcanvaskineticjs
KingSchniddy
KingSchniddy

Reputation: 95

error when trying to load image

Hello stackoverflow community

I'm new to KineticJS and have some issues with loading and image into a canvas Element. If I run my little snippet i get this error:

TypeError: Value could not be converted to any of: HTMLImageElement, HTMLCanvasElement, HTMLVideoElement.

But how can i convert it into the needed Type?

Whole code for it:

<!DOCTYPE HTML>
<html>
 <head>
 </head>
 <body>
  <div id="container"></div>
  <script src="kinetic-v4.3.1.min.js"></script>
  <script>

  var dia_bg = new Image();
  var dia_bg.src = 'http://www.m133.wallerdeknaller.ch/script/dia_img/bg_diagramm.jpg';

  dia_bg.onload = function() {
   var stage = new Kinetic.Stage({
    container: 'container',
    width: 578,
    height: 200
   });

   var layer = new Kinetic.Layer();

   var test = new Kinetic.Rect({
    x: 220,
    y: 50,
    width: 200,
    height: 100,
    fillPatternImage: dia_bg.src,
   });

   layer.add(test);
   stage.add(layer);
  }
  </script>
 </body>
</html>

Thx for any help right away.

Upvotes: 0

Views: 629

Answers (1)

Matt Cain
Matt Cain

Reputation: 5768

  1. You don't need to use var to set a property of an object. Get rid of the var where you set dia_bg.src.
  2. Change fillPatternImage: dia_bg.src to fillPatternImage: dia_bg

Here it is working in a fiddle: http://jsfiddle.net/kcSWA/

Upvotes: 1

Related Questions