Как масштабировать изображение для шаблона холста?

Question

Я хочу заполнить холст изображением и заранее масштабировать его до определенной ширины.

Я пытаюсь добиться эффекта, при котором изображение на переднем плане холста можно стереть с помощью мыши, чтобы просмотреть изображение на заднем плане. Вот почему мне нужно использовать шаблон для заполнения моего холста вместо использования drawImage (). Все работает отдельно от масштабирования изображения переднего плана. Вот мой код для генерации шаблона:

var blueprint_background = new Image();
blueprint_background.src = "myfunurl"; 
blueprint_background.width = window.innerWidth;
blueprint_background.onload = function(){
    var pattern = context.createPattern(this, "no-repeat");
    context.fillStyle = pattern;
    context.fillRect(0, 0, window.innerWidth, 768);
    context.fill();
};

Это делает именно то, что должно, за исключением того, что изображение сохраняет свой первоначальный размер. Как вы видите, я хочу, чтобы изображение масштабировалось до window.innerWidth (который имеет значение 1920 при его регистрации). При необходимости я могу предоставить оставшуюся часть кода, но поскольку ошибка, скорее всего, в этом фрагменте кода, я решил не размещать оставшуюся часть.

РЕДАКТИРОВАТЬ : Вот мой полный код с предлагаемыми изменениями. Изображение переднего плана теперь отображается по всей ширине, однако стирание больше не работает.

JavaScript (обратите внимание, что я использую jQuery вместо $):

jQuery(document).ready(function() {

var cwidth = window.innerWidth;
var cheight = 768;

function createCanvas(parent, width, height) {
        var canvas = {};
        canvas.node = document.createElement('canvas');
        canvas.context = canvas.node.getContext('2d');
        canvas.node.width = width || 100;
        canvas.node.height = height || 100;
        parent.appendChild(canvas.node);
        return canvas;
    }

    function init(canvas, fillColor) {
        var ctx = canvas.context;
        canvas.isDrawing = true;
        jQuery('#canvas').children().css('position:absolute; top: ' + jQuery('#Top_bar').height() + 'px');
        // define a custom fillCircle method
        ctx.fillCircle = function(x, y, radius, fillColor) {
            this.fillStyle = fillColor;
            this.beginPath();
            this.moveTo(x, y);
            this.arc(x, y, radius, 0, Math.PI * 2, false);
            this.fill();
        };

        // bind mouse events
        canvas.onmousemove = function(e) {
            if (!canvas.isDrawing) {
               return;
            }
            var x = e.pageX - this.offsetLeft;
            var y = e.pageY - jQuery('#Top_bar').outerHeight();
            var radius = 30;
            var fillColor = '#ff0000';
            ctx.globalCompositeOperation = 'destination-out';
            ctx.fillCircle(x, y, radius, fillColor);
        };

    }

    var container = document.getElementById('canvas');
    jQuery('#canvas').css('position:absolute; top: ' + jQuery('#Top_bar').height() + 'px');
    var canvas = createCanvas(container, cwidth, cheight);
    init(canvas, '#ddd');

var fgimg = document.getElementById("fgimg");
fgimg.width = cwidth;

var context = canvas.node.getContext("2d");
let canvasP = document.getElementById("pattern");
canvasP.width = window.innerWidth;
canvasP.height = 768; 
let ctxP = canvasP.getContext("2d");
ctxP.drawImage( fgimg, 0, 0,window.innerWidth,768 );    

context.fillStyle = context.createPattern(canvasP,"no-repeat");
context.fillRect(0,0, canvas.width, canvas.height);

});

CSS:

#canvas {
    background:url(http://ulmke-web.de/wp-content/uploads/2019/01/Header-6.jpg);
    background-repeat: no-repeat;
  background-size: cover;
background-position: center center;
    width: 100%;
    height: 768px;
}

HTML:

<div id="canvas">
<canvas id="pattern">
</div>

<div style="display:none">
<img id="fgimg" src=" http://ulmke-web.de/wp-content/uploads/2019/01/Header-5.jpg">
</div>

Answer 1

Я бы использовал два холста. На первом вы рисуете свое изображение и используете этот холст в качестве изображения для создания узора. Чтобы масштабировать изображение, вы масштабируете размер первого холста #pattern в моем примере.

Например, вы можете сделать это для изображения 10/10:

canvasP.width = 10;
canvasP.height = 10; 
ctxP.drawImage( redpoint, 2.5, 2.5 );

или вы можете сделать это для изображения 20/20:

canvasP.width = 20;
canvasP.height = 20; 
ctxP.drawImage( redpoint, 5, 5,10,10 );

Кроме того, в моем примере я добавляю небольшое поле вокруг изображения.

let canvasP = document.getElementById("pattern");
		if (canvasP && canvasP.getContext) {
		let ctxP = canvasP.getContext("2d");
     /*canvasP.width = 10;
      canvasP.height = 10; 
      ctxP.drawImage( redpoint, 2.5, 2.5 );	*/
      
      canvasP.width = 20;
      canvasP.height = 20; 
      ctxP.drawImage( redpoint, 5, 5,10,10 );	
		}
		
		let canvas1 = document.getElementById("canvas");
		if (canvas1 && canvas1.getContext) {
		let ctx1 = canvas1.getContext("2d");
			if (ctx1) {

				ctx1.fillStyle = ctx1.createPattern(canvasP,"repeat");
				ctx1.fillRect(0,0, canvas1.width, canvas1.height);
							
				}
		}

canvas{border:1px solid}

 <img id="redpoint" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO 9TXL0Y4OHwAAAABJRU5ErkJggg==">
<canvas id="pattern"></canvas>
<canvas id="canvas"></canvas>

Надеюсь, это поможет.