html5-canvas


Fabricjs object controls visible outside canvas


I am using fabric.js for html 5 interactive canvas app. If the object scales larger than the canvas, the controls go invisible outside canvas. How to make it visible outside the canvas or is there a way to style those controllers in css.
So, in fabricjs controls are rendered on the canvas, so having controls outside canvas it is not possible.
You can still obtain the effect in this way, this is just a trace.
Make canvas big as 100% of window, or anyway very bigger than drawing area.
Then you can clip the drawing canvas with a rectangle.
If you need borders to define the drawing area you can still put an overlay image as fabricjs allow you.
If you need to have controls near the drawing canvas you will have to position them OVER the non drawing part of the canvas.
This will give you some additional tasks:
When you create some object you have to be sure that they go in the drawing area. If you consider position of objects, you have to consider that a translation has to be applied, because you have absolute position while user will position the object watching a fake top left corner of a drawing area and not the top left corner of the canvas.
The best thing you can do is make a larger canvas, but limit the drawing area to a limited part, like a margin. Not easy because after that you always need to consider the margin when making other calculations, but it is possible.

Related Links

Is there a control like the HTML5 Canvas in Cappuccino Web Framework?
How to do Copy and paste the image from User system to Canvas using fabric.js
Illegal invocation Error with Chrome and Closure
How to get the background color of a canvas
html 5 pattern repeat for canvas
Google web font doesn't work in html
kineticJS Uncaught TypeError: Type error
what is in the HTML5 toDataURL?
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

Categories

HOME
matlab
dom
magento
music
compliance
pyqt5
x-editable
android-sqlite
asana
oracle-adf
delphi-xe7
angular-mdl
classloader
regression
coded-ui-tests
jena
command-line-interface
aar
silk-performer
rational
pcap
sax
jtable
feedly
ruamel.yaml
whatsapi
blockui
spring-data-cassandra
sourcetree
partition
tibco-ems
worldpay
invalidate
dependency-management
rating-system
sections
html-form
domdocument
xssf
koala-framework
jahia
hipi
swift-package-manager
waf
masspay
ipmi
android-sdk-tools
tachyon
android-chips
measurement-protocol
facebook-audience-network
file-management
webdeploy-3.5
activemodel
target-platform
mars
jca
cucumber-java
illegalstateexception
wchar-t
interpreted-language
android-gpuimageview
gulp-rename
chunk-templates
access-log
windows-universal
odoo
mkpolyline
nolio
chatjs
django-postgresql
catalina.out
jquery-backstretch
data-dictionary
parsekit
siblings
pligg
emacs-jedi
zephir
mms-gateway
python-dateutil
datadesign
double-precision
eject
clean-urls
headless-browser
cocosbuilder
squirrelmail
mixing
sticky-footer
hpple
mdi
mate
having
pastebin
myisam
n900
wmd
clipboard-pictures
newsgroup
versant-vod

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