I was recently trying out Brython and I'm having trouble figuring out how to draw a simple rectangle to a canvas.I can only find very complex examples of drawing to a canvas that don't work for me and I was unable to find a clear answer in the docs.
Could someone reading this please show me a bare-bones way of drawing a simple shape to a canvas with Brython and or show me something to get me on the right track?
You have some examples based on a library called brython-bryplot in this IPython/jupyter notebook (it uses a magic function called brythonmagic).
You could use directly the brython-bryplot library or you can have a look at the base.py module to check how shapes and text are implemented.
If you find any issues just let me know as I'm the developer of brython-bryplot, brythonmagic,... :-D
Related
I have images hosted on the server, and I would like develop some functionality to let the user have possibility to draw over the picture.
They need to write some text too, and, finally save the result as picture.
Finally, its a simple editor, but I don't find JavaScript library who permit it...
You can see an example of final result I need here : https://nsa40.casimages.com/img/2019/08/29/190829023122267348.jpg
You can achieve this with the Canvas API pretty easily.
Your images can be pulled into the canvas by creating a new Image object. The canvas API itself has a lot of methods for doing the things shown on the image (drawing shapes like ellipses and rasterising text).
Finally a canvas can be saved into a png using the toDataURL method.
I am sure if you dig around the internet, you will find there are already some libraries for these sorts of things. Possibly some keywords to try would be "image editing library JS" or something of that sort. Developing the functionality on your own should be ok if you follow some examples online for how to do each individual bit. Hope this helps :)
The site http://www.lahautesociete.com/ exhibits the use of a geometric background design whose vertices move in random directions.
I've inspected the DOM and they're making use of canvas to produce the pattern. I'd like to replicate this pattern, but the thing is, even though I have some decent canvas experience, I have no idea where to start on this one.
Is there some sort of mathematical formula that produces the triangular pattern? How would I select the individual vertices? If you can guide me in the right direction, please let me know, thanks!
This is pretty much the only code I could grab pertaining to the canvas design (unhelpful, I know):
<canvas width="1280" height="353" style="width: 1280px;height: 353px;"></canvas>
There's a minified JavaScript file that I unminified, but I've been unable to identify anything relating to canvas within it.
Update: Looks like the deminifier I used couldn't handle the gigantic JS file the site uses. On exploration, I discovered that the site makes use of Three.js
Update (Jan 21, 2016): After a lot of research, I've discovered that the name of the pattern I'm looking to code is called a Delhaunay Triangle. I've come across a few external resources that I look to examine and analyze:
http://christophermanning.org/projects/voronoi-diagram-with-force-directed-nodes-and-delaunay-links
http://codepen.io/blascone/pen/AoFCx
http://codepen.io/kenjiSpecial/pen/BGhrm
I'm looking for a JavaScript library/framework I can use for drawing circles, rectangles, rulers and to be able to interact with them (rotate/resize) using both an API and the UI (so the user can do it as well).
I'm looking for an HTML5 compatible solution, SVG is not an option for me.
Happy with a jquery plugin, if there is anything like that.
I found Paper and it seems that it can draw all shapes and I guess that with some efforts I can do a ruler there, but I didn't find how to interact with the objects it draws.
Would be more than happy if anyone can give me any tip! :)
Thanks!
Kinetic is pretty solid and its open
http://kineticjs.com/
good tutourial site to get you started
http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-rect-tutorial/
EaselJS is more corporate...
http://www.createjs.com/#!/EaselJS
So far in the samples of varies box2d js implementation I can find only element defined in shapes (ball/box/etc), is there a way to create an element defined by an image, e.g. a boulder?
You can use the b2PolyDef and b2PolyShape objects to create polygons.
This documentation is meant for AS3 but it is relatively simple to figure out the JavaScript equivalent.
If you wanted to automate the mapping from an image's bounding box to the polygon, you could use canvas and getImageData() to seek through the pixels looking for non transparent (assuming your image has a transparent background). This is probably more effort than it is worth though.
Also see Understanding custom polygons in Box2D.
I was trying to solve a same kind of problem when i came across this brilliant answer. Hope this will help you.
I want to implement a drawing pane (similar but smaller version to what visio gives for flow charts) in mozilla canvas.
Is there any support for this?
I have used jQuery till now to create the rectangles and move them around. While this is easy here..creating lines (connections between objects) is a real pain. I am using some crude way to color pixel by pixel in javascript and it is neither looking good nor scalable and also I need to build a lot of functions to make the connections stick to a set of objects etc.
Does anyone know if the canvas and the functions available there will make my life easier.
Any pointers to what is a better solution in this case. (I am hoping it is not applet)
Thanks in advance.
Yes you can use canvas for that. Drawing simple shapes and scaling them is pretty simple.
But if you need to edit the shapes after you have drawn them, you will have to invest some more work. Canvas draws in a so called "immediate mode", which means, that it does not know what you have painted right after you have painted it. It does not keep track of painted shapes. If you need that you will have to implement that on your own.
I have done this using the isPointInPath() function which can be used to test if a user clicks on a particular point. I keep track of my painted objects using the MVC-Pattern (Model-View-Controller), so that I can find out which Shape has been clicked on.
Another alternative might be fabrics.js which should be very close to what you need.
Please follow this link :
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial
LMK if it helps!
Following steps may help:
1. Create and add a canvas to the DOM :
var myCanvas = document.createElement('canvas'); document.body.appendChild(myCanvas);
2. Set the width-height of canvas :
myCanvas.width=200;
myCanvas.height=200;
3. Get the context of the canvas and start drawing on it :
var gc = myCanvas.getContext('2d');
4. Code to draw rectangle :
gc.strokeRect(50,50,50,50);
5. After this, add mousehandlers(mousedown,mousemove,mouseup)/touchhandlers(touchdown,touchmove,touchup) on the canvas and handle the movement accordingly.
Either of these jQuery plugins are great for drawing panes:
jCanvas For drawing any simple and even complex shapes
sketch.js for drawing in general.
They are both responsive and compatible.