canvas working only after several calling and refresh

Question

i am working html5 canvas but it not work properly

<section class="row" style="margin: 0px auto;">
  <canvas id="a" width=1000 height=350></canvas>
  <canvas id="b" width=1000 height=350></canvas>
  <canvas id="c" width=1000 height=350></canvas>
  <canvas id="d" width=1000 height=350></canvas>
  <canvas id="e" width=1000 height=350></canvas>
  <canvas id="f" width=1000 height=350></canvas>
  <canvas id="g" width=1000 height=350></canvas>
  <canvas id="h" width=1000 height=350></canvas>
  <canvas id="i" width=1000 height=350></canvas>
<img src="original.png" class="ogimg" id="ogimg"/> 
<img src="shadow.png" class="high" id="high"/> 
<img src="bulldozer-mocha.png" name="bulldozer-mocha.png" onclick="drw(this)">
<img src="bulldozer.png" name="bulldozer.png" onclick="drw_cushion(this)">
<img src="mocha.png" name="mocha.png" onclick="drw_cushions(this)">
</section>

full code is here jsfiddle

code work fully, but it need 2 or 3 page refresh

Please Help me to find the mistake

https://jsfiddle.net/jbedrzxo/

What's not working properly? What are you attempting to do, and what's happening/not happening? We need more information than "not working" since that is subjective and can mean anything. — JNYRanger, Jun 15 '15 at 13:09
function are working, checked with alert message, but the think is need double click to draw the image on canvas — Santhose Kumar, Jun 15 '15 at 15:40
Well what is each canvas supposed to do in the first place? What is the expected behavior? You have not provided enough info for anyone to provide an answer. — JNYRanger, Jun 15 '15 at 15:40
You aren't giving your images time to load before you're trying to drawImage them. You must give your images time to load by setting the image.onload callback. Check out this post: http://stackoverflow.com/questions/30578521/how-do-image-preloaders-work/30581295#30581295. You may want to preload all your images at the start of your app so they're available when needed. Check out this post: http://stackoverflow.com/questions/23220385/is-there-an-onload-function-for-html-canvas/23224039#23224039 — markE, Jun 15 '15 at 15:51
@JNY Ranger - i need draw a image and draw over it, the product is splitted into 9 parts, 9 different parts will need to have different pattern on a single click — Santhose Kumar, Jun 15 '15 at 16:09
@markE - I have tried onload function, it take lot of time to load, one page refresh need to work seamlessely, But far better than previous condition — Santhose Kumar, Jun 16 '15 at 06:41
Please Suggest me some idea to reduce the load timing and double click issue(the full function works on only double click) — Santhose Kumar, Jun 16 '15 at 06:42

markE · Answer 1 · 2015-06-17T01:11:37.540

enter image description here

Here's some code to get you started:

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var c = document.createElement("canvas");
var cctx = c.getContext("2d");
var cw = canvas.width;
var ch = canvas.height;

// Image Loader: put the paths to your images in imageURLs[]
var imageURLs = [];
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/multple/sofa.png");
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/multple/texture1.png");
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/multple/texture2.png");
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/multple/texture3.png");
var imgs = [];
var imagesOK = 0;
preloadAllImages(start);

var sofaParts = [];
var sofa = {
  x: 0,
  y: 0,
  img: null,
  textureIndex: 0,
}
sofaParts.push(sofa);

var texturePatterns = [];

function preloadAllImages(callback) {
  for (var i = 0; i < imageURLs.length; i++) {
    var img = new Image();
    imgs.push(img);
    img.onload = function() {
      imagesOK++;
      if (imagesOK >= imageURLs.length) {
        callback();
      }
    };
    img.onerror = function() {
      alert("image load failed");
    }
    img.src = imageURLs[i];
  }
}

function start() {
  sofa.img = imgs[0];
  for (var i = 1; i < imgs.length; i++) {
    texturePatterns.push(cctx.createPattern(imgs[i], 'repeat'))
  }
  draw();
}

function draw() {
  ctx.clearRect(0, 0, cw, ch);
  for (var i = 0; i < sofaParts.length; i++) {
    var s = sofaParts[i];
    ctx.drawImage(s.img, s.x, s.y);
    applyTexture(s.img, s.textureIndex);
    ctx.globalAlpha = 0.20;
    ctx.drawImage(c, s.x, s.y);
    ctx.globalAlpha = .15;
    ctx.drawImage(s.img, s.x, s.y);
    ctx.globalAlpha = 1.00;
  }
}

function applyTexture(img, textureIndex) {
  c.width = img.width;
  c.height = img.height;
  cctx.drawImage(img, 0, 0);
  cctx.globalCompositeOperation = 'source-atop';
  cctx.fillStyle = texturePatterns[textureIndex];
  cctx.fillRect(0, 0, img.width, img.height);
  cctx.globalCompositeOperation = 'source-over';
}

$('.textures').click(function(e) {
  sofaParts[0].textureIndex = $(this).data('tindex');
  draw();
});

#canvas {
  border: 1px solid red;
  margin: 0 auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<canvas id="canvas" width=300 height=200></canvas>
<h4>Click on a texture for the sofa.</h4>
<img class='textures' data-tindex=0 src='https://dl.dropboxusercontent.com/u/139992952/multple/texture1.png'>
<img class='textures' data-tindex=1 src='https://dl.dropboxusercontent.com/u/139992952/multple/texture2.png'>
<img class='textures' data-tindex=2 src='https://dl.dropboxusercontent.com/u/139992952/multple/texture3.png'>

i realized the way of loading, gone on the way by calling the function twice, thanks to all. — Santhose Kumar, Jun 20 '15 at 13:57

canvas working only after several calling and refresh

1 Answers1