Мы видели несколько хитростей о том, как изменить размер изображения, которое вы хотите использовать внутри IMG-тега, но я хочу иметь переменную изображения внутри Javascript, изменить ее размер и затем использовать изображение внутри context.createPattern (image, "повторение"). Я не нашел ни одного намека на то, как это сделать.

Вы можете найти функциональную демонстрацию наhttp://karllarsson.batcave.net/moon.html с изображениями о том, что я хочу сделать.

Решение от Loktar выглядит хорошо. У меня нетУ меня было время, чтобы исправить правильный аспект, но теперь я знаю, как это сделать. Еще раз, спасибо. Вот рабочая демкаhttp://karllarsson.batcave.net/moon2.html

Это две линии, которые я неработать, как я хочу их тоже.

image.width = side * 2;

image.height = side * 2;

function drawShape() {
    try {
        var canvas = document.getElementById('tutorial');                 
        var image = new Image();                                          
        image.src = "http://xxx.yyy.zzz/jjj.jpg";                         
        image.width = side * 2;                                           
        image.height = side * 2;                                          

        if (canvas.getContext){
            var ctx = canvas.getContext('2d');                            
            ctx.clearRect(0, 0, canvas.width, canvas.height);             
            ctx.fillStyle = ctx.createPattern(image, "repeat");           
            ctx.beginPath();                                              
            var centerX = canvas.width / 2 - side / 2;                    
            var centerY = canvas.height / 2 - side / 2;                   
            ctx.rect(centerX, centerY, side, side);                       
            ctx.fill();                                                   
        } else {
            alert('You need Safari or Firefox 1.5+ to see this demo.');   
        }
    } catch (err) {
        console.log(err);                                                 
    }
}