I have rotated a text in HTML5 canvas. It looks fine on all the browsers except google chrome. It looks distorted on chrome on Windows. Also, it looks fine on MAC. Why is it so?
I am using Chrome beta 20. Is it some HTML 5 issue or some Google Chrome or Windows bug? How can I resolve this distortion issue?
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#myCanvas {
border: 1px solid #9C9898;
}
</style>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.font = "12pt Calibri";
context.rotate(Math.PI/2.5);
context.fillText("Competitive Landcaping!", 450, 100);
};
</script>
</head>
<body>
<canvas id="myCanvas" width="878" height="2000"></canvas>
</body>
</html>
I went through the same head-banging myself recently. The short answer is that Chrome renders fonts quite poorly on Windows, and transformed fonts just get worse from there.
For a longer, more technical answer, check this post:
http://www.smashingmagazine.com/2012/04/24/a-closer-look-at-font-rendering/
There isn't a whole to be done about it, apart from trying to pick fonts that look the 'least worst' in Chrome.
Related
I'm trying to get Chromecast Ultra to display a 3840x2160 web page. It has no problem when the content is a simple IMG but when I try an iframe or some more complicated HTML it crops it down to what looks like the top left but less than a quarter of the whole screen.
I tried Casting (mirroring) from a Chrome tab of the same website that gives me what looks like 1920x1080. A simple image shows full res.
<html>
<head>
<script type="text/javascript"
src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js">
</script>
<style>
body {
display: block;
margin: 0px;
color: #f0f000;
background-color: #ff00ff;
width: 100%; //this is important
height: 100%; //this is important
}
iframe {
width: 3840px;
height: 2160px;
min-width: 3840px;
min-height: 2160px;
}
</style>
</head>
<body>
<!--<img src="EdAGGFS.jpg" width="100%" height="100%" frameBorder="0">Browser not compatible.</img>-->
<iframe id="test" src="https://sorrycantshowyou.com" width="100%" height="100%" frameborder="0" scrolling="no" allowfullscreen="true"></iframe>
<script>
const context = cast.framework.CastReceiverContext.getInstance();
const options = new cast.framework.CastReceiverOptions();
//options.maxInactivity = 3600; //Development only
options.disableIdleTimeout = true;
context.start(options);
</script>
</body>
</html>
I'm plum out of ideas to test any further. I can't find any reference that gives Chromecast Ultra specs for HTML content. I am just assuming it should be capable of 3840x2160 like video or images. Am I wrong? Maybe Chromecast's processor is not up to rendering HTML that big so it crops it instead?
That is an expected behavior for Chromecast.
Note: Images have a display size limitation of 720p (1280x720). Images
should be optimized to 1280x720 or less to avoid scaling down on the
receiver device.
Also, it was mentioned in one of the Chromecast product review online.
The Chromecast 2 displays content in Full HD 1080p resolution – that’s
1,920 x 1,080 pixels. Regardless of whether you have a Full HD or 4K
TV, you’ll still only be able to watch 1080p footage. And if you have
a 720p HD TV, the content will be downscaled to 1,280 x 720 pixels.
I have a Swiffy ad unit that is essentially showing duplicated (stacked) and is bleeding into a module beneath it. As you scroll past it, the duplicated version goes away. Attached is a screenshot and the Swiffy ad code. Any idea what I can do to the code to prevent this?
<style>html, body {width: 100%; height: 100%}</style>
</head>
<body style="margin: 0; overflow: auto">
<div id="swiffycontainer_%ecid!" style="width: 300px; height: 250px">
</div>
<script>
var stage = new swiffy.Stage(document.getElementById('swiffycontainer_%ecid!'),
swiffyobject, {});
stage.setFlashVars("clickTag=%%CLICK_URL_ESC%%%%DEST_URL%%");
stage.start();
</script>
</body>
Results in:
I think you should use iframe to contain that swiffy thing
I'm working with PaperJS. When I resize the browser window, I ask the canvas to redraw. However, the graphics do not re-center, as I draw the graphics from view.center:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Demo</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/paper-full.min.js"></script>
<script type="text/paperscript" canvas="paperjs-canvas">
var center = new Path.Circle(view.center, 450);
center.fillColor = '#000000';
function onResize(event) {
// redraw canvas
paper.view.draw();
}
</script>
<style>
html, body {
padding: 0;
margin: 0;
height: 100%;
overflow: hidden; /* avoid Mac / Chrome overscroll */
}
#paperjs-canvas {
width: 100%;
height: 100%;
background-color: #D0E7D1;
}
</style>
</head>
<body>
<canvas id="paperjs-canvas" class="off" data-paper-resize="true"></canvas>
</body>
</html>
I checked from Developer Console that the resize function is called every time I resize the browser, but the paper.view.draw(); does not re-align the graphics.
What did I miss?
Running on Google Chrome 41, Mac OS X 10.10.2
View.center is just a regular coordinate. There's nothing special about it that keeps an object positioned there locked at the "center" of the canvas.
If you want to keep the same point as view.center after resizing the canvas, you can use view.scrollBy(point) to transform the coordinate system. Just keep in mind that the point [0,0] may no longer correspond to the top-left of the canvas.
var center = new Path.Circle(view.center, 240);
center.fillColor = '#000000';
var lastPoint = view.center;
function onResize(event) {
view.scrollBy(lastPoint.subtract(view.center));
lastPoint = view.center;
}
Here's a sketch on paper.js
I am building a responsive web site and I am finding that Auto Image resize with broswer window resize using img max-width:100% works in Chrome but not IE and Firefox when any parent or ancestor has position:absolute;
(For information about this technique see
http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries
)
The following code can be used to demonstrate or reproduce this problem. you can also see this at http://sketchmotion.com/image-test2/. You will notice that resizing the browser window will resize the image in Chrome but not IE (I am running IE 11) . However, if you remove the following lines:
.mydiv{
position: absolute;
}
You will find that it now works in both Chrome AND IE.
This is not helpful since I I use position: absolute; on some of my parent divs on my site. And I need my site to work in IE and Firefox.
Please let me know if there is a work around for this problem so I can get the images to resize with the browser window on my site.
<html>
<head>
<!-- <link href="/cssh/ImageTest.css" rel="stylesheet" type="text/css"></link> -->
<style type="text/css">
.mydiv{
position: absolute;
}
img{
/*** Scaling Images with the Browser Window in CSS is pretty simple to implement for both images and video. ***/
/*** You can set the media element’s max-width to 100 percent, and the browser will make ***/
/*** the image shrink and expand depending on its container. ***/
/*** To maintain the right proportions use auto height ***/
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
</style>
</head>
<body>
<!-- -->
<div class="mydiv">
<div class="slides">
<div class="slide">
<img alt="" src="http://sketchmotion.com/ImagesSM/SM_Slider_1_SketchMotion_w_Sketch.jpg" />
</div>
</div>
</div>
</body>
</html>
Try this:
.mydiv {
position: absolute;
width: 100%;
}
I don't have an explanation exactly why, but this works. :)
I confirmed that using width: 100%; for parent and all ancestor divs makes it work in IE. However this is a bit of a pain because often that is not what you want to do. Chrome does not have that limitation and scales the image regardless which seems like a more sensible and consistent approach IMHO.
Thanks again Terry Clancy
For the responsive to work on IE. Do not include pictures in a <table>. Just use <div> and use CSS:
img {
max-width: 100%;
height: auto;
width: auto\9;
}
Always problems with IE8 ...
I'm trying to use inline-block to align some text with the top right edge of an image. It works fine in FF, but of course, doesn't work in IE8.
Here's a Fiddle for what I'm doing: http://jsfiddle.net/9DPv5/
I've tried the following:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Did nothing.
<!DOCTYPE html>
Did nothing.
<!--[if lt IE 8]>
<style type="text/css">
li { display: inline !imporant; }
</style>
<![endif]-->
Didn't fix the problem and broke stylings elsewhere on the page.
margin-right:1px
The block already has a margin set on it, so this ofc didn't change anything.
Not really sure what else to try. I don't think anything in the CSS doesn't work with IE8.
I found these too, but not sure where to put them to test:
.divInlineBlock
{
display: inline-block;
float: left;
}
and
display: inline-table;
Edit: It seems that the image is aligning correctly, it's just the text that isn't.
Any help appreciated.
Okay, after a lot of faffing around (I have to log out of the website to test, then log back in EVERY time I make a change, to see if it works...don't ask :( ) I've finally fixed it.
I changed:
#accordion .foobar .foo {
display:inline-block;
width:180px;
height:125px;
vertical-align:top;
margin-right:10px;
to:
#accordion .foobar .foo {
display:inline-block;
float:left;
width:180px;
height:125px;
vertical-align:top;
margin-right:10px;
Adding the "float:left;" to the image fixed this problem.