Hi there,
I am trying to get images onto an HTML5 canvas. The images are on the same page in a sidebar panel getting loaded in through php.
If you click on an image on the sidebar, I want it to appear on the canvas. I am learning jquery, but I do not understand it yet....
Can anyone help out? Here is a part of the html code:
<button class="panel">Section 1</button>
<div class="inhoud">
<?php
global $ConnectingDB;
$sql = "SELECT * FROM decorations ORDER BY id desc";
$stmt = $ConnectingDB->query($sql);
$Sr = 0;
while ($DataRows = $stmt->fetch()) {
$Image = $DataRows["image"];
?>
<img src="uploads/<?php echo htmlentities($Image); ?>" class="deco">
<?php } ?>
</div>
<button class="panel">Section 2</button>
<div class="inhoud">
<p> </p>
</div>
</div>
<!-- canvas area -->
<canvas width="1000px" height="500px"></canvas>
Basic jquery:
function draw() {
var image = document.getElementsByClassName("deco");
var canvas = document.querySelector("canvas");
var ctx = canvas.getContext("2d");
ctx.drawImage(image, 0, 0)
}