Click here to Skip to main content
15,886,362 members

I want to create a canvas.js application for image editing for cars

Member 14109498 asked:

Open original thread
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:

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


HTML
<pre><h1>Test</h1>
<input type="file" id="input"/>
<canvas width="400" height="300" id="canvas"/>
Tags: Javascript, HTML5, Image, Canvas, Upload

Plain Text
ASM
ASP
ASP.NET
BASIC
BAT
C#
C++
COBOL
CoffeeScript
CSS
Dart
dbase
F#
FORTRAN
HTML
Java
Javascript
Kotlin
Lua
MIDL
MSIL
ObjectiveC
Pascal
PERL
PHP
PowerShell
Python
Razor
Ruby
Scala
Shell
SLN
SQL
Swift
T4
Terminal
TypeScript
VB
VBScript
XML
YAML

Preview



When answering a question please:
  1. Read the question carefully.
  2. Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
  3. If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
  4. Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.
Let's work to help developers, not make them feel stupid.
Please note that all posts will be submitted under the http://www.codeproject.com/info/cpol10.aspx.



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900