Canvas js image editor

JavaScript
1

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

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');
    }
}

<h1>Test</h1>
<input type="file" id="input"/>
<canvas width="400" height="300" id="canvas"/>

this allows me to add several photos but i want to some how control where they go maybe with another upload button and use the coordinates in canvas to direct them any help would be really appreciated

2

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.