I currently have an issue whereby changing the fillStyle of a canvas is causing a smooth diagonal line to turn jagged and I don't know why.
I've created a JSBin where you can see the effect here: http://jsbin.com/fadeyiva/1/edit
I've set the background colour to black so you can more easily see the canvas and the jagged edge. The grey shape is the canvas, if you scroll down to the bottom of the page and then back up it should trigger the waypoint and change the canvas colour to orange.
However, if you look at the bottom diagonal line it starts off smooth when it's grey but when it changes colour the edge becomes very jagged. I don't know why this is happening because the code is only changing the fillStyle, it's not altering the shape of the canvas at all.
The reason is because your angled box is originally being drawn in your canvas with respect to dithering (this is taken care of natively). When you apply a fill change as you are, you throw out the idea of dithering and simply make every single pixel of the object the same color. The edges of the object need to blend with the background (thats what dithering means).
I suggest instead of just adjusting the fill value of the object, redraw the entire object as you did in your window.onload() function. Because you are calling a redraw, the browser will force the dithering on the object and adjust it for the new color.
Related
Animation works great when I set any color to the background. But when I put a transparent background, the animated “waves” begin to leave traces. How can I fix this?
https://codepen.io/obiwan-kenobi/pen/JebWjG
ctx.fillStyle = 'rgba(255,255,255,0)';
ctx.fillRect.apply(ctx, _toConsumableArray(bounds.params));
enter image description here
It leaves traces because you need to redraw the changed areas of your canvas, or simpler, redraw the entire scene.
You are using a pencil and are drawing every frame on the same sheet of paper without using your eraser. Thats is why. :)
I saw a very interesting canvas technique on the site http://capitolcouture.pn/ when clicking on Issue 1. This flower/circle Effect.
I'm quite familiar with the canvas element drawing diagrams and so on, but I'm not able to examine how the transparent circle is created and put over the second canvas with text.
EDIT
Because of the tip, that people don't follow links from stackoverflow beginners I try to explain the effect.
You have 2 canvas elements.
One is lying on top of the other.
The canvas lying below the first one contains some text.
If one hovers over the top canvas, a certain radius around the mousepointer gets transparent cleared on the second canvas.
On this mouse hover, the first canvas spawns graphics corresponding to the second ones text letters.
Any suggestions?
i got a problems using the heatmap-openlayers.js, i loaded a page with some default points that only shows the heatmap gradient, but when i dragged the image (map) or moved the gradient to the bottom of the image i found out that i also have a red line on the map, it's seems to be a replication of the gradient's set of points but couldn't figure out why it's happening..
i uploaded a sample to: http://hightech-library.com/heatmap
and i added a bit css so you will see the problem on the go, if you will drag the image to the left the red line will disappear like something is blocking it, and when dragging back it will reappear..
check out the source of the page and you'll see the sample code.
can anyone tell me if i'm doing anything wrong or how to fix it..
i figured out what the red line were, when drawing a heatmap it draws all the points with the max gradient color with an offset of 1000 from the position you requested and then it makes a shadow on the canvas of these points instead, this shadow is the heatmap that you see with all the gradient's colors.
When drawing on an image with a fixed color this offset of 1000 wasn't enough and when i dragged the map i saw the source of the shadow as "red lines".My solution was to increase this offset and push those "red lines" outside the canvas.
I have 2 canvas in a div. I tried to translate one of the canvas, but it didn't work.
http://jsfiddle.net/VkbV5/ shows the case where i commented off the translation line:
this.innerElement2Ctx.translate(100,100);
But when I include the line, the small square disappeared. Why? If you run this page in browser and inspect the innerElement2, you will see that it didn't move at all, but the small square disappeared.
For your information, I need 2 canvas, because I am planning to attach mouse event to innerElement2.
Translating a context adjusts where the 0,0 point is for future drawing commands; scaling a context adjusts how large items draw on the canvas; rotating a context adjusts the direction that items are drawn. None of these context transformations adjust the size or position of the canvas box itself.
Here's an example I made of adjusting canvas transformation so that drawing the same commands allows the user to zoom and pan around a canvas drawing:
http://phrogz.net/tmp/canvas_zoom_to_cursor.html
If you want to move the placement of a canvas within your HTML page, use simple CSS placement as you would with any other element, e.g. a <div>.
If you want complex 2D or 3D transformations you can use cutting edge features of CSS for this (as supported by modern browsers). For example, see:
https://developer.mozilla.org/en/CSS/transform#CSS_transform_functions
I currently have text on a canvas that is white. I would like to be able to slowly and smoothly fill the text with another color (red) from left to right. Is there a way to do this so at times a letter will be white on a fraction and red on the other side?
An example using the word "Color".
The "Col" are red. The next "o" has 25% red (left) and 75% white (right). The "r" is full white.
Update
Thanks for all the help. I noticed it works even better if you add ctx.beginPath() before the clip object.
I have added a little bit to the idea and created a small js object that seems to work nicely for my current project. It may not be the most elegant js but hopefully it helps out someone else that wants to do this later. There is a slight issue I noticed with the size of text changing when it starts to fill, not sure why. http://jsfiddle.net/WRAFA/4/
You can do this whit the composite operation source-in. If you first draw your text with your background color (white) with composite operation source-over and then draws a colored-rect over it with soruce-in its only intersection between the text and rect that will be drawn. I made a small example at jsfiddle
Nice job on fixing Richard's fiddle. I've made a couple improvements.
you asked for a black canvas background with white text.
The use of setInterval is not recommended here. You are running draw for ever and ever and ever and ever and ever and.... I have fixed the fiddle to use setTimeout so that it stops the draw events as soon as you get to the edge of the canvas.
The adjusted fiddle is at http://jsfiddle.net/d4Jef/1/
One thing I would recommend, though. Instead of using compositing, you should write text using a clipping region. The problem with source-in compositing is that if your text were written over some kind of image with opaque pixels, then filling a rect over this would blow away your background. You got away with it here because you had nothing else on your canvas except the text. So it's better to go with a clipping region.
Here is the version with the clipping approach: http://jsfiddle.net/5ZgNz/2/
Note the use of the additional green square to highlight which this approach works in general.