I am trying to draw a 1px line and it works properly in FireFox, however, in IE11 no matter what attributes I tried it seems always produce a line with 2px thick.
It is impractical to set the origin to 0.5 unit. Depends on the width of your stroke that if it's odd number of units you need to add or subtract 0.5 but if it's an even number you don't. If you add or subtract 0.5 indiscriminately you end up for inconsistent line width based on the stroke size and origin. The shape-rendering:crispEdges seems to solve this problem. But looks like the problem was due to the shape-rendering: crispEdges property not being respected in IE.
Related
I'm currently drawing a line chart on a html5 canvas (In plan vanilla JavaScript) with a width of 1px and moving along as I draw on the x axis 2px spacing per data point. Currently my canvas size is 1000px by 300px.
My data is most of the time much larger than my canvas. I need some idea of a smart approach to zooming (or to make it seem like you are zooming) as I would like to be able to zoom and drag the view-able area around without loosing the crispness of the 1px line.
A note: The canvas could be a drawing of cat for all it matters, for the sake of a clear question if it was a cat then the cat would be much larger than the canvas and you might, as a user, be interested at looking closely at its foot and scrolling around or zooming out to see the whole cat. The real problem I see is the fact that it is a line drawing of 1px thickness.
Would it be more practical to change (increase/decrease) the x spacing and the magnitude of the the y movements when drawing? So that this way If zoomed out far, I would be drawing still with 1px thickness and still drawing on the same size canvas but moving much more fin-eight distances. This way I would have to repaint I think every time I navigate the area and if altering zoom. Also the canvas would not need to be zoomed with css.
Or would It be better to Increase the size of the canvas to a much much larger one and change the thickness of the line with each zoom? So this way when you are zoomed out the line thickness would be greater than if you were zoomed in but the distance and spacing between movements would always be the same no matter what level the zoom was. Also this way I assume I would have to repaint only when zooming the canvas element with css to change line width whereas scrolling the drawing would be fine as the whole drawing would all-ways fit into the large canvas.
I have heard that there are limitations on size and rendering on different browsers for a start and I would like to know If anyone has had any experience in dealing with large canvas drawings.
For further detail: My data points are around 70,000 long I will be increasing to 100,000 data points so the canvas would be quite big, hence my concern (it is a static chart so no worries about stalling the browser with such a large task).
What would be the most 'do-able' way and would there be a more logical approach to this task?
Please no library's.
You can keep your crisp fine lines when zooming by setting the canvas CSS size much smaller than the canvas element size.
Example:
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var canvas1=document.getElementById("canvas1");
var ctx1=canvas1.getContext("2d");
// draw on standard canvas
ctx1.beginPath();
ctx1.moveTo(50/4,50/4);
ctx1.lineTo(250/4,250/4);
ctx1.stroke();
// draw on resolution enhanced canvas
ctx.lineWidth=4;
ctx.beginPath();
ctx.moveTo(50,50);
ctx.lineTo(250,250);
ctx.stroke();
#canvas{border:1px solid red; width:100px; height:100px;}
#canvas1{border:1px solid blue; width:100px; height:100px;}
<h4>Left: Standard canvas, Right: Resolution enhanced</h4>
<h4>Zoom your browser to notice the difference (eg 200%)</h4>
<canvas id="canvas1" width=100 height=100></canvas>
<canvas id="canvas" width=400 height=400></canvas>
I want to show another image on hover and due to the layout of the homepage I need to use sprite to do it. I've got it working fine, but I'm using fixed width and height for the container.
You can see my JSFiddle here:
http://jsfiddle.net/mckeene/fhk0byqt/4/
The problem arises when I want to make it responsive. I can use max-width: 100%, but what about the height?
OK, this solution is based on the known fact that some properties like padding-top and margin-top, when given values in percentage, are calculated based on the width of an element rather than its height.
Making an element “as high” as required by the known dimensions of a responsive image can be done by using padding-top – I used a value of 66.54% here based on your image’s dimensions (half the image height divided by the width, times 100) to span the container element up to the required height.
Now normally to display the upper half of an image first, and then the second half on hover, I would use absolute positioning – but we can’t use top here, since a value in percentage for that property would be based on the height. But luckily, as already mentioned, margin-top is one of those properties where percentage is calculated based on the width – so we can use margin-top: -66.54% here to “pull” the image up over its container’s padding first to show its upper half, and then double that (margin-top: -133.1%) to pull it up even further on hover, to show its lower half.
It's a simple project, and I have not played around a lot with the standard code. But I still get this weird 1px margin around my ad... in this case adduplex.
I've tried to set the with to 480, margin to 0 and for the page properties designheight is 800 and width is 480 :-/
Does anyone know what I can test/do to correct it? I dont want this margin (blue horizontal line, right of the black with white upper and lower border).
As I mentioned the black with upper and lower border is my AdDuplex Control. The blue line should be white, but because my app somehow needed this margin its blue as my background
Image:
I have different widths for borders applied to a div, and only Firefox shows thin seams when the div is rotated to any angle using CSS3 Transition Rotate. These thin seams change slightly depending on angle.
If the borders are the same width, Firefox behaves nicely.
The div is not using an image, just a colored background, but the content seems irrelevant for the border of different widths issue I'm having.
Unfortunately the area behind the border is going to be reserved so I'm not able to use another div as a wrapper.
Here's a jsFiddle of an example to be seen in Firefox that has this issue. There are no issues in Chrome.
Status Update: Updated jsFiddle to show border-style prior to border-color per CSS rule but no change.
I wonder if this issue is because border-image property, which I am not using, allows up to eight images, one for each border slice. That said, if there were border-corner-color properties then that would solve the issue when using Rotate.
I have made a solution using :before in CSS: jsFiddle example.
I added this code:
#thinLinesInFirefox:before {
content: '';
display: block;
width: 201px;
height: 201px;
position: absolute;
top: -105px;
left: -120px;
border-top: 104px;
border-right: 110px;
border-bottom: 115px;
border-left: 119px;
/* Define border-style before border-class per CSS rule. */
border-style: solid;
/* Define boder-color */
border-color: black;
z-index: -1;
}
Basically, it overlays the same square using :before, except I have decreased the border-top and border-left by 1 pixel, and then increased the width and height by 1 pixel so that the 'real' div underneath appears to be the same size.
Because of the different borders, the seams are in slightly different positions, so what is underneath doesn't show.
Those look like antialiasing artifacts from painting the border in several separate pieces. Each piece is being rotated, so its edges get antialiased, with the result that some pixels at the join are partially transparent (because they're the result of painting two partially-transparent pixels on top of each other).
There is no problem on this testcase in Chrome because at corners it paints the borders under each other. Of course that causes non-opaque borders to be totally broken in Chrome; see http://snook.ca/archives/html_and_css/safari-transparent-borders
And if you were to make the border colors slightly different, you'd get seams in WebKit too. See http://jsfiddle.net/YVCeX/ (it shows seams in the div's background color, whereas Firefox optimizes away background painting under opaque borders, which is why you're seeing red seams, not blue ones.
There's really no good way to handle this, in general, without turning off antialiasing for border edges and having jaggy borders when rotated.
The problem:
I have a set width and height image Lets say height:160px; width:200px; with an image in each box.
The image can vary in size but I need a solution that will always center the image vertically and horizontally within the box no matter what it's size.
Horizontal doesn't seem to be a problem by using margin: 0 auto but vertical is proving difficult. I have tried vertical align: center but this doesnt appear to work either
Any help is appriciated
Thanks
center is not a valid value for vertical-align (you're probably confusing it with middle). Still, vertical-align isn't the correct method here and is often a misunderstood property. I've recommended the following site a few times and it should help you, too:
http://phrogz.net/css/vertical-align/index.html