I'm trying to add an image to an Canvas element. Canvas markup:

<?php foreach($fdsArray as $key => $value):?>
   <div class="design" id="<?php echo $key;?>" data-design="<?php echo $value['url'];?>">
      <canvas width="200" height="200"></canvas>
      <p class="name"><?php echo $value['name'];?></p>
      <p class="asset"><?php echo $value['asset'];?></p>
   </div>
<?php endforeach;?>

Javascript:

<script type="text/javascript">
    $(document).ready(function() {
       $('.design').each(function() {
            var design = $(this).attr('data-design');
            var id = $(this).attr('id');
       });
    });
</script>

I want the image to show inside the canvas element. var design contains the url. Could anyone help me out?

I'm trying to add an image to an Canvas element. Canvas markup:

<?php foreach($fdsArray as $key => $value):?>
   <div class="design" id="<?php echo $key;?>" data-design="<?php echo $value['url'];?>">
      <canvas width="200" height="200"></canvas>
      <p class="name"><?php echo $value['name'];?></p>
      <p class="asset"><?php echo $value['asset'];?></p>
   </div>
<?php endforeach;?>

Javascript:

<script type="text/javascript">
    $(document).ready(function() {
       $('.design').each(function() {
            var design = $(this).attr('data-design');
            var id = $(this).attr('id');
       });
    });
</script>

I want the image to show inside the canvas element. var design contains the url. Could anyone help me out?

• javascript
• jquery
• canvas

• What does $value['url'] set at data-design ?, a url to an image file ? – guest271314 Commented Apr 15, 2015 at 18:13
• Yes. What value is expected to be set at .design element data-design attribute ?, can describe "the needed informations" ? – guest271314 Commented Apr 15, 2015 at 18:16
• So yes, it takes the url for the image from an XML document. – pr0b Commented Apr 15, 2015 at 18:16

3 Answers 3

Try

$(document).ready(function() {
  $('.design').each(function() {
    var design = $(this).attr('data-design');
    var id = $(this).attr('id');
    var canvas = $(this).find("canvas")[0];
    var ctx = canvas.getContext("2d");
    var img = new Image;
    img.onload = function() {
      ctx.drawImage(this, 0, 0);
    };
    img.src = design;
  });
});

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="design" id="image" data-design="http://lorempixel./technics/200/200/">
  <canvas width="200" height="200"></canvas>
  <p class="name">name</p>
  <p class="asset">asset</p>
</div>

You will have to draw each image to its associated canvas through javascript using the canvas.drawImage method.

sample code follows:

var canvas = document.getElementById("c");
var ctx = canvas.getContext("2d");

var image = new Image();
image.src = "get image source from data- attribute";
image.onload = function() {
    ctx.drawImage(image, 0, 0);
};

Use sth similar inside $.ready callback

...or in pure javascript:

// canvas related variables
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;


// a reference to #theURL
var theDiv = document.getElementById("theURL");

// the url from theDiv's data-design
var theURL = theDiv.getAttribute("data-design");

// new up an image
var img=new Image();

// when its fully loaded, call start()
img.onload=start;

// set the source of the new image to the url from data-design
img.src=theURL;

function start(){
  // draw the new image to the canvas
  ctx.drawImage(img,0,0);
}

body{ background-color: ivory; }
#canvas{border:1px solid red;}

<div class="design" id=theURL data-design="https://dl.dropboxusercontent./u/139992952/multple/sun.png">
  <canvas id="canvas" width=300 height=300></canvas>