Hi I was thinking of doing a side project on canvas .js and I’m really into cars and wanted to see if there was a way of creating a site for car lovers to upload images of their car and have other canvas elements that they could drag and drop on to the image that they uploaded and change for instance the wheels lets say.
So that they could edit their car digitally online before actually doing it if anyone could point me in the right direction that would be great, I’m a newbie at canvas but im willing to learn.
thanks to who ever reads this and replies means a lot
What I have tried:
<pre>var input = document.getElementById('input');
input.addEventListener('change', handleFiles);
function handleFiles(e) {
var ctx = document.getElementById('canvas').getContext('2d');
var img = new Image;
img.src = URL.createObjectURL(e.target.files[0]);
img.onload = function() {
ctx.drawImage(img, 20,20);
alert('the image is drawn');
}
}
<pre><h1>Test</h1>
<input type="file" id="input"/>
<canvas width="400" height="300" id="canvas"/>