We Keep Coding

GOJS exporting the canvas diagram as an image

I am using the GOJS javascript framework to work with flowcharts. I have a pretty huge flowchart that isn't fully visible in the viewport. There is a scrollbar to view the hidden content in the canvas.
I am trying to export the canvas as an image. But I am only able to export the visible part in the canvas and not the full flowchart. I have tried using canvas.toDataURL() and the GOJS diagram.makeImageData() APIs, but haven't been successful.
Could the JS experts here please help me out? Thanks so much...

You should not be touching the Canvas element inside the Diagram's DIV element.
Have you read http://gojs.net/latest/intro/makingImages.html ? You need to pass some options to Diagram.makeImageData.

Jquery - How to draw line box (object) on image which can be dragged and removed?

I'm trying to draw one more multiple line box on an image like this:
By giving a (xAxis,yAxis,height,width,red/green) then draw a box object on the image.
The box objects can be removed and dragged. I know I can do it with html canvas for just draw box on it. However if I wanna manipulate(drag or remove) the box I think I have to create it as a javascript object. What's the good strategy to do so?

use sketch.js Use this link
To use Sketch.js in your project, just grab the latest sketch.js (or minified) from GitHub and include it in your project after jQuery.
Read the full tutorial for sketch js
Read The Full Documentation

Transform image on canvas based on 4 points

I have a small application that uses Paperjs to render an image between four points.
The user should be able to drag these four points freely.
It would be nice if the image inside automatically transforms into this given tetragon, like on the picture below.
Do you know a library that is able to help me with this job?
Of course Paperjs is able to apply a matrix transformation, but is there a “simpler” solution like:
Image.transform(point1, point2, point3, point4);
Just like this ActionScript demo, but in Javascript with canvas:
http://www.rubenswieringa.com/code/as3/flex/DistortImage/
Thank you!

This d3.js codesnippet did the job for me:
http://bl.ocks.org/mbostock/10571478

Image Map Area Highlight and Zooming with iScroll 4

In my Cordova project, I have a slider with multiple zoomable images (by iScroll) and I would like to use map to highlight some area always. But I have tried many libraries like imagemapster.js, maphilight.js but these libraries prevent images' zooming feature. Is there any library that I can use to highlight area only.
Any help or idea. Thanks in advance!

I got figured it out. For someone like me, here is my solution.
I used imagemapster.js for highlighting map areas. But I applied imagemapster first and then I grab those whole element and then applied iScroll(version 4) for zooming. First, i was doing backward, that's why I can't zoom in or out anymore. Cheer!

Can I draw something like Wheel of Fortune using CSS?

I wish to draw a Wheel of Fortune using just CSS and jQuery. I don't want to use any images.
Also, I want to have at least 8 segments in the circle and properly align each text word vertically in each segment. Here's a photo to illustrate:
Once I have this working I then can use CSS3 rotate property.
Any idea how could I do this?

Here's a Spinning Wheel Demo done in HTML5 using Canvas: LINK
Direct download to the project demo files : ZIP
EDIT: Here is a different tutorial demo:
Creating a roulette wheel using html5 canvas

Here is another example of a spinning wheel using a Canvas

Check this link -> http://joelb.me/blog/2011/css-mask-tutorial-rotating-image-gallery/
It contains an introductory tutorial to somewhat you need. Check for the JS 2d Transformation library code at github too.

I created a roulette wheel using Raphael at: http://www.guesttime.com/members/ledlogic/roulette/index.html
It has the text rotated like you do, but you'd have to handle the centering for each letter.