I am working on an image editor with kineticjs. So it's time to make nice brushes. I would like to use png images for this with a different set of alpha values for each pixel, depending on the brush type, and changing the color once they are added to the layer.
I would like to know, how can I achieve this? I made a simple painter following the answer to this question But what I want is to reduce the opacity in some parts of the shape that we use as base for painting lines, like in this image. Notice that the first and the last are the same, just the opacity in the last is less. Thank you.
The stroke of a Kinetic.Line cannot use a fillPattern (it's a stroke without any fill).
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 have question related with coloring image (mask) in Javascript. I am looking for technologies stack, libraries, ideas which help mi with my issue. I plan to write JS app which allow user to color part of image, I mean that if you have fence image, you could color the wood. I will have image and mask (transparent image with black places where color should be placed). Application should give possibility to change saturation of placed color on image (te texture should be more or less visible depend on color category) and adding additional texture on mask where color will be placed for e.g. changin wood grain.
Can you tell me which approach will be better? Should I use third-party library (e.g. WebGL like pixi or three js) or simply canvas and iterating though pixels and manipulate them, e.g. making average color by taking R and G and B value of image pixel and destination color (but I see problems with putting textures and saturation). Or maybe you will have some other ideas?
I don't know that I described problem clearly. If you have some questions, please ask and I answer it.
Thanks!
I'm currently using svg.js - but I am very welcome to alternative suggestions - is there any way I can create a polygon and then apply a repeating texture to it?
Below is an example of what I am attempting to achieve. Here is a jsFiddle which shows my best attempt. This works, but the image doesn't repeat so if you increase the size of the polygon the effect is lost.
I'm creating an image, and then two polygons. One for the shape and another for the shadow. I then mask the image with the polygon.
image.maskWith(polygon.fill({color: '#FFF'}));
The idea is that instead of creating many different shaped, coloured and textured PNG's we will be able to create one texture and use svg.js to adjust everything else.
Thanks in advance :)
This is what the <pattern> element in SVG is for. Mozilla documentation.
Svg.js has a pattern plugin. Usage is very simple:
var pattern = draw.pattern(20, 20, function(add) {
add.image(20, 20)
})
var circle = draw.circle(200).fill(pattern)
I only need to mention that patterns in Opera sometimes render black. I still need to find out why that is.
UPDATE:
The latest release of svg.js (1.0.0-rc.4) supports direct a fill with an image url or image instance:
var circle = draw.circle(200).fill('/path/to/image.jpg')
More info here: http://documentup.com/wout/svg.js#syntax-sugar/fill
so i have been trying to work on a canvas sketching app. and i had this problem where the line drawn are very unclean. As you can see from image below.
then i tried this and got the below result which is what i desire.
But this created a new problem, the eraser function wont work. Now I've been trying to make this two work for sometime, but just could'nt do it.
So what i want is a new smoothing technique or a way to make the above two work.
BTW here is the demo without smoothing: http://jsbin.com/axarun/1/edit
and here is the demo with smoothing: http://jsbin.com/aviluk/2/edit
Thnx in advance.
Method 1:
You can "force" the canvas to use anti-aliasing by doing this:
ctx.translate(0.5, 0.5);
Force in quotes as this is dependent on actual implementation in the browser you're using. Currently there is no way to enable/disable anti-alias by intention.
Method 2:
Set the canvas to "high-resolution" by setting the canvas itself to double size, but force it to be displayed in the original size by styling the canvas element with CSS rules:
<canvas id="myCanvas" width="1600" height="1200"
style="width:800px;height:600px" />
Just remember to double your mouse-coordinates as well as pen-width. This will eat 4x more memory and performance, but will give you high-resolution lines (in appearance).
In this case the browser will treat the canvas as an image and apply anti-aliasing as it does for any scaled image, and not the canvas' method for anti-alias.
Please note that this is not the same as applying scale transform to the canvas.
See demo of "hi-res canvas" here:
http://jsfiddle.net/q2t5A/
Method 3-ish:
For actual smooth lines you can check out my function to do so here:
http://www.codeproject.com/Tips/562175/Draw-Smooth-Lines-on-HTML5-Canvas
This takes an array of x/y couples and smooths the line (cardinal spline). The lines will go through the original points and no control points are needed.
This will of course imply that you record the actual points, and when mouse up you redraw the canvas using the curve() function in this code. That would be a correct approach in any case, to record the strokes in an array and then redraw (this will also allow you to use layers). There are workarounds to avoid render everything by using off-screen
canvases to store f.ex. each layer. By drawing a canvas onto another with a small non-integer offset will force anti-alias (but see point 1).
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().