html5-canvas


Adding images on to canvas when Onclick on the canvas


Currently I have setup a canvas, and I'm trying to add some images onto it.
So only when i Onclick on the canvas, a small images will then appear on the position that i clicked on the canvas.
Can anybody able to help me out?
The first thing to keep in mind is that you'll need to capture the coordinates with respect to the canvas, not the entire page, which is exactly what you'll get from the onclick event. This is fairly easy to translate, with code such as this:
var onMouseClick = function(evt){
var x, y;
var point = findOffset(e.target);
x = e.pageX - point.x;
y = e.pageY - point.y;
return {x,y};
}
var findOffset = function(element) {
var left = 0;
var top = 0;
if (element.offsetParent) {
do {
top += element.offsetTop;
left += element.offsetLeft;
} while(element = element.offsetParent);
return {
x : left,
y : top
};
}
};
Where your onMouseClick callback returns an object with the x,y position that the click occurred in your canvas itself.
Next, you'll want to insert your image at this point. How you do this is going to depend somewhat on where your image source, is but it will basically look like:
var canvasCtx = document.getElementById("myCanvasElement").getContext('2d');
var img = document.getElementById("id-of-an-img-tag-in-your-DOM");
canvasCtx.drawImage(img,x,y);
If you want to load your image from somewhere besides the DOM, you can construct the image object yourself like so:
var img = new Image();
img.onload = function(){
canvasCtx.drawImage(img,x,y);
};
img.src = "url/to/your/image.jpg";
This will cause your image to be loaded from a URL on mouse-click, then once the image finishes loading, adds it to your canvas.

Related Links

Animate (Oscillation) custom drawn shape on Canvas
3d Models Augmented Reality Javascript (js-aruco)
Draggable element in KineticJS that is “under” another?
Three.JS - DAE Animation Without Skins
How to use Flot canvas plugin
canvas issue on chrome mobile
paint application with kinetic js
HTML5 Canvas API
How to add subscript and superscript text in kinetic text
Tween after dragging doesn't start to the drag-end position (with KineticJS)
How to Get Display Object width using createjs framework in html5
try google webfonts on html5 canvas every method: standard, #import, javascript and webfont loader, neither work
drawImage() on canvas saturates colors and messes up alpha
Creating a fadeIn effect
set offset/position of polygon to rotate
How to rotate an image x degrees then move in that direction?

Categories

HOME
elastic-beanstalk
demandware
bootstrap-4
music
orbeon
openshift-origin
anylogic
path
jsonschema
garbage-collection
bootstrap-selectpicker
intel-xdk
spi
mvvm-light
windows-10-desktop
eloqua
doorkeeper
cytoscape.js
chart.js2
highlight
union
googletest
aar
ssrs-tablix
lazy-loading
spring-boot-admin
aerospike
zap
textmatebundles
ghost-blog
similarity
centroid
c-strings
liferay-aui
background-subtraction
addthis
smallbasic
pvs-studio
physics
shinydashboard
gcp
localdb
server-sent-events
inria-spoon
jsonstore
h5py
psychopy
worldpay
procobol
formatdatetime
ulimit
sweet.js
invalidate
mobile-browser
appdynamics
zuul
openwebanalytics
requirements-management
simplesamlphp
harvest-scm
playback
jawr
netbeans-7
breach-attack
business-logic
sizeof
activemodel
app-engine-ndb
webmail
isapi-rewrite
trello.net
main-activity
wand
laravel-forge
coldfusion-10
interpreted-language
spl
push-api
crosswalk
polygons
equinox
stringr
crowdflower
java-client
adserver
cvs2git
brooklyn
lwuit-list
monk
linguistics
dojo.gridx
cellular-automata
dirpagination
css3pie
qt4.7
onejar
libnids
flash-cs4
uptime
word-2010
vote
headless-browser
jsr223
android-actionmode
treetop
jdic
system-tray
mkmapviewdelegate
gedcom
68hc11
development-machine
nhaml

Resources

Mobile Apps Dev
Database Users
javascript
java
csharp
php
android
MS Developer
developer works
python
ios
c
html
jquery
RDBMS discuss
Cloud Virtualization
Database Dev&Adm
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App