html5-canvas


Drag clickable URL in HTML5 Canvas


There are lots of pages that tell me how to drag a shape or image across a canvas, even drag text. However, I want to drag texts in the form of clickable HTML URLs (hyperlinks), i.e., to group several on the one canvas to give an impression of relevancy (the closer the links to each other, the more closely they are related. (being HTML links, only their titles will be visible - the actual URLs will be hidden).
The first problem that arises is whether I can use a single left-click to either activate the link (take me to another page) or have it interpreted as the beginning of a drag. Probably I will have to use a different hotkey, such as a r-click to drag, a l-click to activate. I don't want to have to double-click to activate - an extra click becomes tedious.
I haven't found anything that specifically addresses this problem, either in this forum or elsewhere, so would be grateful for suggestions as to how to go about implementing this form of drag-and-drop. Thanks.
Moving your link will essentially be the same as moving an image. Canvas has no URL componentant or tag element - you'd have to create your own.
So you're pretty much just going to create a button with an onclick event that will call the URL associated with that button.

Related Links

Limit resize in Fabric.js
Where are the specs of HTML canvas globalCompositeOperation modes?
How to add a background picture to a Jit infovis spacetree
Covert QR code canvas to image
MouseOver and Mousedown inside a object
Using CreateJS to apply an alpha tween to a drawn line
Increasing canvas height at runtime in Fabric.js affecting object selectable and drag drop in IE9
Is it possible to get values from chart drawed on HTML canvas?
Moving the camera to look at a Plane Object
html5 canvas increase image size
optimizing code for future changes
Dart: SecurityError when getting ImageData from Context
Client Side Image Resizing - canvasResize add multiple file option
Is there a way to load an image in the canvas object without using javascript?
HTML5 canvas draw image “Uncaught Error: INDEX_SIZE_ERR: DOM Exception 1” in Android Webview
Why jpeg dataURL is a whole black image?

Categories

HOME
ios
web-applications
configuration
python-3.5
design
prebuild
swashbuckle
wikipedia
streaming
textbox
box
jasypt
angular-mdl
restsharp
wget
ceph
calayer
overloading
hyperion
chart.js2
condor
android-dialogfragment
data-annotations
lazy-loading
teraterm
api-design
ssrs-2008
stm32f4discovery
co
deadbolt
robotium
profiling
python-responses
machine-language
webcenter
haxm
jupyter-irkernel
weebly
jsonstore
tern
simplesamlphp
ssms-2012
vega-lite
infiniband
ipmi
ocsp
sizeof
heritrix
pygments
file-management
blpapi
sqlj
samsung-gear
database-tuning-advisor
pyenchant
hypervisor
nbug
equinox
cbc-mode
textmatching
conditional-statements
tortoisecvs
tab-delimited
django-postgresql
nine-patch
asp.net-apicontroller
b2b
preon
batman.js
confirmation
libtorrent-rasterbar
nsusernotificationcenter
broadcom
sugar.js
scrollpane
google-chrome-frame
chromeless
tempo
wpf-4.0
ria
proxy-classes
datatemplate
pong
jquery-1.3.2
mkmapviewdelegate
xquery-update
pinging
greensoftware

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