I created a shape in canvas and want to drawn an image in it.
So far I can clip the image to the shape but I want the image to adapt it self with the Free Transform -> Distort effect or something similar.
In the example:
The image on the left is the clipped one.
The image on the right is the original.
The bottom image is the result I want to achieve.
The code can be seen here: http://jsfiddle.net/NAe9c/
The code result can be seen here: http://www.tribalddb.pt/final.jpg
edited:
Thank You all
I accepted that answer to this issue but I found another alternative to my problem, CSS 3D.
I didn't know it until now =P
Yes, you can draw things flat and have them rendered in perspective. You can't do it simply with a 2D transform so there's a bit of math to the ordeal if you want to use the 2D context but nothing insane.
I'd suggest doing a search for "canvas perspective transform" and you'll find a lot of demos, like this one:
http://tulrich.com/geekstuff/canvas/perspective.html
You will need to do perspective correction for something like this, I think it would be easier to get a library to do it for you, have considered using:
Three.js
Related
I'm trying to figure out how to make a website image, just some little blob of color without actually creating an image and putting an image tag and all of that. Is it possible?
Would I be drawing it with CSS, Javascript, or HTML5? If drawing it on the fly with something like Javascript, is that something that is a good idea? drawing over and over?
Not sure where to start looking? Thanks for any help.
Here is an example of an image I'd like to make: https://dl2.pushbulletusercontent.com/0P1OxQU6AoPT5LnWG3jROJgEmdWoPKUw/image.png
SVG is a good choice. It allows you to use a document structure, much like that of HTML, for vector graphics. The <rect> element makes a rectangle. For more complex shapes like your example, check out paths. More info here: Rounded corner only on one side of svg <rect>
Vector graphics are easy to generate and manipulate programatically. They can also be sized and scaled without pixelation.
If you need complex filtering or want raster graphics instead, a Canvas element and its 2D drawing context are a good choice.
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
I saw a picture mapped to a cylinder in CSS3 and I was wondering if this is possible with a text. Even better would be to map the text to a sphere. If it is not possible with pure CSS, Javascript could be an option.
It must run on all major browsers, also those not having the -webkit- stuff.
Thanks in advance.
As mentioned in the comments CSS3 only supports rotating and skewing elements, and doesn't have any support for spheres.
Although you can fake a sphere in SVG using something like Raphael.js, i don't think there's any real support for doing 3D stuff using Vector graphics. You'd have to map/wrap/skew the text yourself using some crazy math, and it still might not even be possible.
I think your only real hope is to use something like three.js to create an actual cube object. Then you could write your text to a hidden canvas element to get an image of the text, and map the image onto the cube as a material, as in this example.
I am trying to transform a non-uniformed portion of image in a canvas element to a proper rectangle (ie. Like taking a non-rectangle portion of an image in photoshop and using Distort to make it rectangle), but am having difficulty understanding Canvas Matrix Transforms.
I am not after code, just a point in the right direction, in terms of understanding how I could achieve this.
Cheers
Update 1: Incase I didn't explain well enough http://i.imgur.com/QTB6q.png
Update 2: The those boxes are an area inside a photo which was added to the canvas, essentially I am cropping and straightening a portion of the image.
In html5 canvas you can apply only affine transformations using transform or setTransform() methods, so you need to know what is the matrix applied already and using the inverse matrix to make it look like a square area, for other transformations (non-affine), it is needed some math knowledge (that I don't have), create or search for an implementation for Canvas API (which works only with affine transformations).
http://raphaeljs.com/polar-clock.html
I'd like to create this without using SVC or Canvas. Can anyone point me in the direction of examples doing something similar with css?
Thanks!
Well, SVG certainly seems to be the correct solution to this (or canvas, but I would prefer SVG). And the Raphael script will even work in old versions of IE as it switches to VML in IE6/7/8, so if you're trying to avoid SVG/Canvas because of that then you don't need to worry.
But you're asking how to do it without them, so I'll see what I can do...
There are a number of people who have demonstrated drawing some quite complex shapes using pure CSS. See http://css-tricks.com/examples/ShapesOfCSS/ for example.
With pure CSS/HTML, the only realistic way to draw curves is using the border-radius style. A circle as per the example in the question could be achieved using a square element with border-radius, and a thick border.
Drawing concentric circles as per the question would involve numerous elements layered on top of each other, each styled similarly, but at different sizes.
Now the tricky bit. To turn them from circles into arcs is going to be harder. The only sensible way I can think of to do it would be to layer some more elements on top of the circles coloured the same as the background, to obscure part of the circle. We would need to use CSS transform to rotate them so that the angle of the cut-off was correct.
So it could be done.
Animating it (certainly as nicely as in the example) would be another order of magnitude more difficult, and I wouldn't want to even start thinking about it. Just give me the SVN any day.