Я пытаюсь масштабировать, вращать и переводить пользовательское изображение холста

Question

Можно ли назначить функцию в качестве значения элемента canvas? Вот моя текущая реализация (нерабочая).

    function recImagePressed(e){
     var outputCanvas = document.getElementById("outputCanvas");
     outputCanvas.value = draw();//-----this is my concern. 

    function draw() {   
   img = new Image();  
   img.src = canvas2.getContext();  
   fr1 = makeFrame(context2, makeVect(100,100), makeVect(200, 50), makeVect(50, 200));
   img.onload = function(){ 
            var newPainter = imagePainter(fr1);
            context2.save(); 
    }  
 }

Answer 1

Ну, вы не можете делать это так, как вы это делаете. Вы также не можете сделать:

img = new Image();  
img.src = canvas2.getContext();  

Это не сработает. Но вам не нужно этого делать, потому что вы можете нарисовать один холст на другом с помощью drawImage(canvas, x, y)

Вам нужно что-то похожее на:

var outputCanvas = document.getElementById("outputCanvas");
outputCtx = outputCanvas.getContext('2d');
outputCtx.scale(x,y);
outputCtx.rotate(radians);
outputCtx.drawImage(canvas2, 0, 0);

В зависимости от того, как вы хотите повернуть и масштабировать изображение, находящееся на canvas2, перед его рисованием в outputCanvas