I have created a grid with just basic lines in illustrator and saved as SVG. I then am loading that svg into a html canvas of exactly the same size as the svg.
However no matter what i do the black lines on the canvas svg look grey, in fact the odd one or two is black, but the others look like they are being anti aliased.
I don't want the canvas to do that, i need the lines sharp and black, not grey! They look fine in illustrator, after i turned off anti-alias.
Does anyone know how to prevent the canvas doing that? I am using fabric js
You can turn off anti-aliasing by using the following property:
shape-rendering="crispEdges"
It can be a style attribute, or you can specify it in CSS. You will need to edit the svg, or your CSS. You can't set this in Illustrator.
This will work fine for rectangular grids, but curved or angular lines will look worse. of course.
You can also avoid anti-aliasing by being careful where you place your lines. See the following answer for more info on that.
https://stackoverflow.com/a/23376793/1292848
Related
I am making a photo editor where you can upload an image, add filters, put on text, draw with a pencil, etc. The problem is that the filters that I want on just the image, applies to everything on the canvas. I don't want it to apply to the text and the drawn lines with a pencil. Is this even possible in vanilla JS or would I have to use a library?
This is how I it looks right now when the text color is actually set to red and I applied grayscale:
This is how I want it to look with red text and grayscale applied:
This happens with all of the other filters as well, but gray scale was the most obvious one, so I used that as an example. I did not include code as I am mainly asking if this is even possible.
Yes it's possible, just set the ctx.filter back to "none" after you've drawn the image.
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 know that the canvas element can look like a circle using the CSS border-radius property. However, if you draw something using the canvas API, and then right-click to "Save as Image", when saved, the image is still a rectangle (as if the border-radius was not applied). Is there a way to actually save the correct image?
All image formats that I know of yield rectangles.
You could draw a circle on a canvas with the outside of the circle being transparent. That would visually look like a circle rather than a rectangle.
When css applies, it does not really transform the image except visually. So, you would need a bit more than simple css. The issue is discussed here where what you want is achieved using javascript:
Save canvas image after css applied
Capture and save an image with css effects applied
Hope this helps.
I would like to have a repeated pattern of squares (a little like a blueprint) as a background to the entire SVG element. I am using Raphael. How can I accomplish this?
I want to do this with SVG rather than images as I pan / zoom the SVG using SetViewBox and I would like the background to scale appropriately too.
One option is to render those squares the usual way, via paper.rect(). Might be expensive, though, and would take some maintenance if the canvas can grow in size.
The other option is to do a patterned fill, paper.rect(0,0,100,100).attr({fill: "url(images/pattern.png)"}); (see this tutorial), which should automatically repeat the image it is given. I haven't done that myself, though, so I'm not really sure how the pattern is scaled when you do SetViewBox().
I'm trying to draw a simple battery symbol in SVG which will be animated using HTML/JavaScript:
http://pastebin.com/utM4BTRS
I'd like to dynamically manipulate the mask over the "battery level" drawing inside the SVG but the mask is not displayed as drawn in Inkscape. Firefox and Webkit both display only a tiny bit of that part (no JavaScript involved yet):
http://tinypic.com/view.php?pic=deu44m&s=7 (Inkscape drawing on the left, Firefox rendering on the right)
Since I am new to SVG: what's the problem here?
Unless you need to use e.g gradients in the mask you should try to use clip-path instead. Actually, if you can remove the use of mask completely that's even better.
Now, to answer your question, you can remove maskUnits="userSpaceOnUse" from the mask element and it will work. Also you should save as "Plain SVG" from inkscape when exporting, it makes the svg output look a tad cleaner.