холста, работающий только после нескольких звонков и обновить

Question

я работаю html5 холст, но он не работает должным образом

<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> 

полного кода здесь jsfiddle

код работать в полном объеме, но это нужно 2 или 3 страница обновление

Пожалуйста, помогите мне найти ошибку

https://jsfiddle.net/jbedrzxo/

Answer 1

Вот код, чтобы вы начали:

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'>