HTML5画布图案绘制延迟

Question

i draw a canvas(aka canvas 1) with image( ) then rotate it 25 degree. then i take rotated canvas to make a pattern for another canvas(aka canvas 2). then i draw this . and fill the fillstyle with newly created pattern. i noticed if alert in the middle of below code

 finalsleeve_ctx.globalCompositeOperation = "source-atop";
           /*****************************************
              alert(sleeve.toDataURL('image/png'));
            *****************************************/
              var pattern = finalsleeve_ctx.createPattern(sleeve, 'repeat');

then firefox gives a correct output but if i dont do alert it does not give me correct output. crome not showing me correct output.

do i need to delay ?

here is what i have tried.

HTML

 <div >     
                <canvas id="sleeve" width=436 height=567></canvas>
                <canvas id="finalsleeve" width=436 height=567 ></canvas>

            </div>

JS

var sleeve = document.getElementById('sleeve');
var sleeve_ctx = sleeve.getContext('2d');

var finalsleeve = document.getElementById('finalsleeve');
var finalsleeve_ctx = finalsleeve.getContext('2d');
 function rotator2(var2,var3) 
{
   sleeve.width=sleeve.width;
   var imageObj_rotator2 = new Image();
   imageObj_rotator2.onload = function ()
   {
    var pattern_rotator2 = sleeve_ctx.createPattern(imageObj_rotator2, "repeat");
    sleeve_ctx.fillStyle = pattern_rotator2;
    sleeve_ctx.rect(0, 0, sleeve.width, sleeve.height);
    sleeve_ctx.rotate(var3 * Math.PI/180);
    sleeve_ctx.fill();
    }
    imageObj_rotator2.src = var2;

}
    function drawSleeve()
    {
      finalsleeve.width = finalsleeve.width;
      var imgsleeve = new Image();
      imgsleeve.src="http://i.stack.imgur.com/FoqGC.png";
      finalsleeve_ctx.drawImage(imgsleeve,0,0);
      finalsleeve_ctx.globalCompositeOperation = "source-atop";
      alert(sleeve.toDataURL('image/png'));
      var pattern = finalsleeve_ctx.createPattern(sleeve, 'repeat');
      finalsleeve_ctx.rect(0, 0, sleeve.width, sleeve.height);
      finalsleeve_ctx.fillStyle = pattern;
      finalsleeve_ctx.fill();
      finalsleeve_ctx.globalAlpha = .10;
      finalsleeve_ctx.drawImage(imgsleeve, 0, 0);
      finalsleeve_ctx.drawImage(imgsleeve, 0, 0);
      finalsleeve_ctx.drawImage(imgsleeve, 0, 0);
    }
rotator2('http://i.stack.imgur.com/fvpMN.png','25');
drawSleeve();

Here is fiddle. http://jsfiddle.net/EbBHz/

Answer 1

EDITED

Sorry, I completely misunderstood your question. I just now went back and saw the last question you posted and the goal you are trying to achieve.

To get the functionality you desire you can just create one function, you don't need two. Instead of using a second canvas in the HTML I created a temporary one using javascript.

Here is the simplified and functional code

<canvas id="sleeve" width='436' height='567'></canvas>

var sleeve = document.getElementById('sleeve');
var ctx = sleeve.getContext('2d');

function rotator2(var2, var3) {
    // Draw the original sleeves
    var imageObj_rotator2 = new Image();
    imageObj_rotator2.src = var2;
    imageObj_rotator2.onload = function () {
        var imgsleeve = new Image();
        imgsleeve.src="http://i.stack.imgur.com/FoqGC.png";
        ctx.drawImage(imgsleeve,0,0);

    // Create a second temporary canvas
        var pattern = document.createElement('canvas');
        pattern.width = 500;
        pattern.height = 500;
        var pctx = pattern.getContext('2d');
   // Make the pattern that fills the generated canvas
        var pattern_rotator2 = pctx.createPattern(imageObj_rotator2, "repeat");
        pctx.fillStyle = pattern_rotator2; 
        pctx.rotate(var3 * Math.PI / 180);
   // Fill the generated canvas with the rotated image pattern we just created
        pctx.fillRect(0, 0, pattern.width, pattern.height);

   // Create a pattern of the generated canvas
        var patterned = ctx.createPattern(pattern, "repeat");
   // Fills in the non-transparent part of the image with whatever the 
   // pattern from the second canvas is
        ctx.globalCompositeOperation = "source-in";
        ctx.fillStyle = patterned;
        ctx.fillRect(0, 0, sleeve.width, sleeve.height);
    }
}

rotator2('http://i.stack.imgur.com/fvpMN.png', '45')

The technique works alright, but only for certain angles. Here is the demo set to 45 degrees. As you can see, there is a problem: part of the sleeve is whited out. However, if you change the degree to 15 like this it works just fine. This is because when the image is being rotated in the created canvas it leaves white space before repeating. To see this issue first hand, change the width and the height of the created canvas to 30 (the default width/height of the image) like this

Note : You may have to click run once the jsfiddle tab is open, canvases don't like generating content when another tab is focused

I tried problem solving the issue including

• Making the generated canvas really large (which works but KILLS load time/crashes page sometimes)
• Translating the picture in the generated canvas after rotating it which didn't work like I had hoped
• Coming up with a function to change the width/height to cover the entire first canvas based on the rotated second-canvas-dimensions, which is by far the most promising, but I don't have the time or desire to work out a good solution

All that being said if the angle HAS to be dynamic you can work on a function for it. Otherwise just use a workaround angle/generated canvas dimensions

Answer 2

final result > Here is a working solution for fill rotated pattern without white at any angle

        var sleeve = document.getElementById('sleeve');
    var ctx = sleeve.getContext('2d');

    function rotator2(var2, var3) {
      var x =0;
      var y=0;

     //pattern size should be grater than height and width of object so that white space does't appear.
      var patternSize =  sleeve.width+ sleeve.height;

      // Draw the original sleeves
      var imageObj_rotator2 = new Image();
      imageObj_rotator2.src = var2;
      imageObj_rotator2.onload = function () {
      var imgsleeve = new Image();
      imgsleeve.src="http://i.stack.imgur.com/FoqGC.png";
      ctx.drawImage(imgsleeve,0,0);

      // Create a second temporary canvas
      var pattern = document.createElement('canvas');
      pattern.width = sleeve.width;
      pattern.height = sleeve.height;
      var pctx = pattern.getContext('2d');
      // Make the pattern that fills the generated canvas
      var pattern_rotator2 = pctx.createPattern(imageObj_rotator2, "repeat");
      pctx.fillStyle = pattern_rotator2; 

      //moving rotation point to center of target object.
      pctx.translate(x+ sleeve.width/2, y+sleeve.height/2);
      pctx.rotate(var3 * Math.PI / 180);

     // Fill the generated canvas with the rotated image pattern we just created and expanding size from center of rotated angle
      pctx.fillRect(-patternSize/2, -patternSize/2, patternSize, patternSize);

      // Create a pattern of the generated canvas
      var patterned = ctx.createPattern(pattern, "no-repeat");
      // Fills in the non-transparent part of the image with whatever the 
      // pattern from the second canvas is
      ctx.globalCompositeOperation = "source-in";
      ctx.fillStyle = patterned;
      ctx.fillRect(x, y, sleeve.width, sleeve.height);
    }
    }

    rotator2('http://i.stack.imgur.com/fvpMN.png', '50')