Скрыть/показать изображения внутри холста

Question

Я создаю страницу, где я хочу, чтобы люди могли накладывать изображения, а затем загружать их на свой сервер.

Я создал страницу загрузки, и я положил два тестовых изображения на холст. Единственная проблема noe заключается в том, чтобы скрыть/показать эти два изображения с помощью кнопки или флажка.

Я загрузил тестовую страницу здесь: http://kaosmos.no/bokbodentest2/upload.html

Это мой код для холста:

<input type="checkbox"/>Check to hide img1 
<input type="checkbox"/>Check to hide img2 


<img class="bilder" id="img1" src="test1.png"> 
<img class="bilder" id="img2" src="test2.png"> 
<canvas id="canvas"></canvas> 

<script type="text/javascript"> 
var img1 = document.getElementById('img1'); 
var img2 = document.getElementById('img2'); 
var canvas = document.getElementById('canvas'); 
var context = canvas.getContext('2d'); 

canvas.width = img1.width; 
canvas.height = img1.height; 

context.globalAlpha = 1.0; 
context.drawImage(img1, 0, 0); 
context.globalAlpha = 0.5; //Remove if pngs have alpha 
context.drawImage(img2, 0, 0); 


</script> 

И CSS:

canvas { 
border: solid; 
overflow: hidden; 
} 

canvas img { 
width: 600px; 
position: absolute; 
mix-blend-mode: multiply; 
} 

.bilder { 
display: none; 
} 

Дисплей: нет; в классе «bilder», чтобы изображения не были видимыми за пределами холста. Как создать функцию для скрытия/отображения этих изображений?

Любая помощь очень ценится!

Answer 1

С момента, когда изображение нарисовано на холст, оно больше не связано с исходным элементом в DOM, вы хотите скрыть его на холсте, так что вам нужно будет перерисовать холст каждый раз, когда вход изменен, не вызывая соответствующую функцию context.drawImage. Что-то в этих строках:

<input type="checkbox" onchange="draw()"/>Check to hide img1 
<input type="checkbox" onchange="draw()"/>Check to hide img2 


<img class="bilder" id="img1" src="test1.png"> 
<img class="bilder" id="img2" src="test2.png"> 
<canvas id="canvas"></canvas> 

<script type="text/javascript"> 
var img1 = document.getElementById('img1'); 
var img2 = document.getElementById('img2'); 
var canvas = document.getElementById('canvas'); 
var context = canvas.getContext('2d'); 
var inputs = document.querySelectorAll('input[type="checkbox"]'); 

canvas.width = img1.width; 
canvas.height = img1.height; 
function draw(){ 
    context.clearRect(0, 0, canvas.width, canvas.height); 
    context.globalAlpha = 1.0; 
    if(inputs[0].checked){ 
     context.drawImage(img1, 0, 0); 
    } 
    context.globalAlpha = 0.5; //Remove if pngs have alpha 
    if(inputs[1].checked){ 
     context.drawImage(img2, 0, 0); 
    } 
} 

</script>