I've been toying around with iPad and HTML5 but since the display is retina, the text on my screen seems to be of low resolution. As do lines drawn with lineTo/moveTo/stroke. Note the text is drawn with context.fillText()
I suspect this is just because I haven't set up the canvas correctly to handle the retina pixel ratio, so hopefully someone here can figure out what exactly I'm doing wrong.
I have set up the canvas as follows:
<div id="container">
<canvas id="canvas"></canvas>
</div>
With CSS attributes:
#canvas {
width: 1024px;
height: 768px;
}
#container {
width: 1024px;
height: 768px;
}
and in JavaScript (as I have seen to do on the internet) I have specified:
canvas.width = 2048;
canvas.height = 1536;
Unfortunately this does not stop the pixelation as it has for some other users.
Am I missing something or have I specified something incorrectly?
Try adding this line to your page head:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
This tag makes sure that the page is shown in its original size, and remains in that size.
Related
When building my website, i faced an image with some text in it.
But the text only display when i changed background-color to black.
After some research, i think ít's a transparent image, and we have some online tools to replace background image.
Anyone know how remove background from an image really work ?
And why it make the text showed up ?
This is my image.
updated: Sorry, my question is not clear. Here is my code
https://codepen.io/ging2507/pen/wvWJeyR
when i remove comment of navbar, the Text of image show up(not the normal text 123131). And i dont know why this happened
.navbar {
background-color: #14425D;
}
The image doesn't change at all. It just has some pixels that are marked as transparent.
Consider a sheet of glass. Paint on it using white paint. Put it on a sheet of white paper. Now you can't see what was painted on it. Replace the white paper with black paper. Not you can see what was painted on it.
I am not sure if I understand your question correctly. You have an image that you want to remove the grey background from? I have tried to use this tool and this is the following output that I got. The text cannot be read since it is it white and blends together with the background. I hope this helped
Edit: The tool that I have posted can also replace the background as you can see here
EDIT
You can also use CSS to add background to the image.
I have mananged to add linear gradient to the image using CSS. You can see the code
.logo {
background: linear-gradient(
105deg,
rgba(34, 193, 195, 1) 0%,
rgba(253, 187, 45, 1) 100%
);
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=">
<title></title>
</head>
<body>
<img src="https://i.stack.imgur.com/Pawab.png" alt="some logo" class="logo">
</body>
</html>
Here is a link to codepen if you want to play around with it.
On my iPhone 7 in Safari a 3in wide div is about 1.8in in real.
Why didn't they set devicePixelRatio so that 3in in css are 3in in real?
Is there a specification on how to set devicePixelRatio?
Is there a workaround?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
</head>
<body style="margin:0">
<div style="width:3in;background:orange">3in</div>
</body>
</html>
The CSS units such as inch and cm are not recommended to use according to w3.org, except you're planning to print out your webpage:
The only place where you could use pt (or cm or in) for setting a font size is in style sheets for print, if you need to be sure the printed font is exactly a certain size. But even there using the default font size is usually better.
If you really need to use inches as units, please take a look at this answer here
I do want to display some text inside 3D box image using aframe in ar.js.
Following is the HTML code
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.5.0/aframe/examples/vendor/aframe/build/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.5.0/aframe/build/aframe-ar.js"></script>
<!-- <script>THREEx.ArToolkitContext.baseURL = 'https://rawgit.com/jeromeetienne/ar.js/master/three.js/'</script> -->
</head>
<body style='margin : 0px; overflow: hidden;'>
<a-scene embedded arjs='trackingMethod: best;'>
<a-anchor hit-testing-enabled='true'>
<a-box position='0 0.5 0' material='opacity: 0.5;'>
<a-entity text="value: HELLO"></a-entity>
</a-box>
</a-anchor>
<a-camera-static/>
</a-scene>
</body>
</html>
My main task is to project some dynamic text inside the 3D box. But for instance, I am trying to put some static text. But unable to do so. Does anybody know how can I add text inside the box?
actually Your code is working, but both the box, and text are white + the text is really small:
If You enlarge it a bit + make it black, it would be apparent, that it is there:
<a-entity position="1 0 0" scale="3 3 3" text="value: HELLO;color:black"></a-entity>
I have two absolutely positioned adjacent elements that share the same background color. They appear to be one single element on my desktop and laptop, but there's a plainly visible "border" of sorts - a sliver of translucent color - between the two elements when viewed on the iPad.
If I had to guess I'd say it's due to the different method by which vector objects are drawn in the browser in iOS, but that's just a guess based on some vague information I heard in a talk once.
Here's an entire sample page that can show the issue if you can run it on an iPad:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<style type="text/css">
#container {
position: relative;
width: 200px;
height: 40px;
background-color: transparent;
}
#left {
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 40px;
background-color: red;
}
#right {
position: absolute;
top: 0;
left: 50px;
width: 150px;
height: 40px;
background-color: red;
}
</style>
</head>
<body>
<div id="container">
<div id="left"></div>
<div id="right"></div>
</div>
</body>
</html>
The problem only occurs if Safari is scaling the page.
Safari scales elements individually, often resulting in each element having a 1-pixel-wide translucent edge on one or more sides. Then when the scaled elements are placed side by side, the overlapping translucent edges are still not 100% opaque, so some of the background leaks through.
The problem isn't limited to absolutely-positioned elements; it applies to all adjacent elements (except images, it seems).
For instance, if a table is styled with td { background-color:black } there will sometimes be subpixel slivers of background showing between the table cells. Even two adjacent spans exhibit the problem.
My solution is to restructure the page so that adjacent elements of the same color are wrapped in a container, and the background is applied to the container. This is a lot of work. In your case, a quick fix would be to overlap the divs by 1 pixel.
I do consider this to be an iPad bug. None of my Windows browsers (including Safari) have this problem when zooming a page.
I have a simple HTML5 webapp that uses javascript to create a canvas context and draw a simple image of a caret (^) which is then referenced in the definition of a CSS class to render the image on multiple tags.
The application displays fine in a browser: have tried Google Chrome (Win7), Mobile Safari (iPad IOS4 & IOS5, iPod (IOS4 & IOS5).
But if on the iPad or iPod I "Add to Homescreen" and then launch the webapp the ^ image is not rendered onto the .
I am aware there are differences in the way HTML5 is rendered when launched from the homescreen as opposed to viewed in Safari, but my searches haven't turned up anything that would indicate that this shouldn't work.
I would appreciate if anyone could shed some light on this for me.
Code sample below:
**(index.html)**
<html>
<head>
<link rel="stylesheet" href="styles/main.css" >
<script src="scripts/main.js"></script>
</head>
<body>
<div class="scoreboard-item-wrapper">
<div class="scoreboard-item">
<div class="box" ><button id="btn_homegoalup" class="up" onclick="incAction(true,true)"></button>
</div>
</div>
</div>
</body>
</html>
**(main.js)**
initChevronUp("chevron-up", "hsl(228, 1%, 50%)");
function initChevronUp(id, style) {
var context = document.getCSSCanvasContext("2d", id, 22, 13);
context.save();
context.translate(4,0);
context.clearRect(0, 0, 20, 13);
context.strokeStyle = style;
context.lineWidth = 3;
context.beginPath();
context.moveTo(1, 9);
context.lineTo(6.5, 1);
context.lineTo(12, 9);
context.stroke();
context.restore();
}
**(main.css)**
.scoreboard-item .box button.up{
background:
-webkit-gradient(linear,left top, left bottom,
from(rgba(255, 255, 255, .25)), to(transparent) ),
-webkit-canvas(chevron-up) center center no-repeat transparent;
}
try to write the full URL for CSS and javascript files.
The relative path you have is getting safari to look for files locally.