createPattern无法在Canvas Rect上运行吗？

Question

First off heres live code

I want to fillStyle of a square with a image using canvas.

I have 2 rectangles that I've created:

Question: How do I apply an images as a pattern to the pink rotated and translated sq?

using this JS:

$(document).ready(function(){
  var c = $('#myCanvas')[0],
      ctx = c.getContext('2d');

//starting square.
  ctx.translate(100,0);
  ctx.fillRect(100, 100, 100, 100);
  var gradient = ctx.createLinearGradient(0, 0, 0, c.width);
  gradient.addColorStop(0, "rgb(255, 255, 255)");
  gradient.addColorStop(1, "rgb(0, 0, 0)");
  ctx.save();

//next square
  ctx.translate(100,100);
  ctx.scale(2,2);
  ctx.rotate(Math.PI/4);
  var image = new Image();
  ctx.fillStyle = 'rgba(200,10,10,.5)';
//the image isnt being applied as a pattern to the sq?
  image.src = 'http://lorempixel.com/400/200/';

  $(image).load(function(){
    var pattern = ctx.createPattern(image, 'repeat');
    ctx.fillStyle = pattern;
  });

  ctx.fillRect(0,0,100,100);
  ctx.restore();

});

Answer 1

You try to draw the image before it was loaded. The script working flow is the following:

image.src = 'http://lorempixel.com/400/200/';

then

ctx.fillRect(0,0,100,100);
ctx.restore();

and then, when image load complete

var pattern = ctx.createPattern(image, 'repeat');
ctx.fillStyle = pattern;

See your CodePen updated