HTML5 canvas showing blurry context.
The red rectangle, on green background:
When I made the canvas width & height == window width & height (fullpage). Also it is showing a horizontal scrollbar even if the body{ margin: 0; }. How can i fix this ?
my code
html ->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<canvas></canvas>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="main.js"></script>
</body>
</html>
css ->
body
{
margin: 0;
}
canvas
{
/*border: 1px solid black;*/
background: green;
}
jquery ->
$(document).ready(function(){
$.fn.showMSG = function(){
var canvas = $("canvas");
var ctx = canvas[0].getContext("2d");
canvas.width($(window).width());
canvas.height($(window).height());
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,50,50);
}
$(window).ready(function(){
$.fn.showMSG();
});
});
Your code is calling the .width() and .height() methods on the canvas. This doesn't change the height and width attribute of the canvas, but rather its height and width style which causes it to look stretched. Instead use .attr() to change the height and width attribute of the canvas.
See working example below:
$(document).ready(function() {
$.fn.showMSG = function() {
var canvas = $("canvas");
var ctx = canvas[0].getContext("2d");
canvas.attr('width', $(window).width());
canvas.attr('height', $(window).height());
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 50, 50);
}
$(window).ready(function() {
$.fn.showMSG();
});
});
body {
margin: 0;
overflow: hidden;
}
canvas {
/*border: 1px solid black;*/
background: green;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<canvas></canvas>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="main.js"></script>
</body>
</html>
Related
I was wondering how would I go around changing my modal's background color after it has displayed, like the following: I want the background color to cover the whole page and not just color the modal itself. I tried:
.modal {
background-color: rgb(255, 0, 0);
}
But this resulted as I said in the colored modal and not the whole page.
Here's a snippet for refrence:
const modal = document.querySelector(".modal");
const openModal = document.querySelector(".open-button");
const closeModal = document.querySelector(".close-button");
openModal.addEventListener("click", () => {
modal.showModal();
});
closeModal.addEventListener("click", () => {
modal.close();
});
.modal {
background-color: rgb(255, 0, 0);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<button class="button open-button" >Open</button>
<dialog class="modal">
Hi! I'm 15Rabi
<button class="button close-button" >Close</button>
</dialog>
</body>
<script src="script.js"></script>
</html>
To change the backdrop color for a <dialog> element you needs to style the ::backdrop pseudo element like this:
.modal::backdrop {
background-color: rgb(255, 0, 0);
}
Ideally though you'd want to to be a semi transparent color, not solid red, so you might want to use rgba instead
.modal::backdrop {
background-color: rgba(255, 0, 0, 0.5);
}
Links to the relevant docs:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog
https://developer.mozilla.org/en-US/docs/Web/CSS/::backdrop
Try this in your CSS
dialog::backdrop {
background-color: rgb(255, 0, 0);
}
How do i modify :hover after an animation has occurred and changed the font-size of an h1?
it goes like this:
text: font-size: 12.5rem; letter-spacing: 0;
hover over the text- font-size: 13.5rem letter-spacing: 1rem; , after a few seconds, an animation with #keyframes comes and is changing the font-size, from 12.5rem to 5 rem. with the new change applied (font-size: 5rem;) I want to hover over it again but this time the values of :hover to change, the size when I hover to be from 5rem(the new values after the animation) to 6 rem, and letter-spacing, from 1rem; to 0.2rem.
i don't know how to do it.. please help me with some code
solution created with vanilla Js
let title = document.getElementById('title');
let i = 0;
title.addEventListener('mouseover', function() {
if (i >= 1) {
hoverText(5, 6);
title.removeEventListener('mouseover', function() {});
} else {
hoverText(12.5, 13.5);
i++;
}
});
function hoverText(small, big) {
title.style.fontSize = big + "rem";
setTimeout(function() {
title.style.fontSize = small + "rem";
}, 1000);
}
h1#title {
font-size: 12.5rem;
letter-spacing: 0;
transition-duration: 1s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script src="./script.js" defer></script>
</head>
<body>
<h1 id="title">h1 element</h1>
</body>
</html>
I have made a HTML project in Appcelerator. I want a full screen canvas so in CSS I set the property to 100% (without quotes) which I found out doesn't work with Appcelerator.
I've tried '100%' with quotes and Ti.UI.SIZE which both size it at a weird size that has the same aspect ratio seen in the image below. I have coloured the canvas green and the body yellow so you know its not the parent that's the problem.
I have tried searching but HTML only apps don't seem to be too popular with Appcelerator so i cannot find an answer.
My CSS:
canvas {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right:0;
width: '100%';
height: '100%';
background-color: green;
}
body{
background-color: yellow;
}
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- saved from url=(0047) -->
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Title</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="../css/style.css">
<script defer type="text/javascript" src="../scripts/main.js"></script>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
</html>
As #HiddenHobbes says in the comment - remove the quotes from your CSS, like so:
canvas {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right:0;
width: 100%;
height: 100%;
background-color: green;
}
Heres a Fiddle to show it works: JSFiddle
EDIT:
vw and vh could possible work too:
canvas {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right:0;
width: 100vw;
height: 100vh;
background-color: green;
}
vw is for Viewport Width and vh is Viewport Height.
This is running fine for me using Titanium 7.1.1.GA and an Android device:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Title</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
<style>
#canvas {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: green;
}
body {
background-color: yellow;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
if (document.readyState !== 'loading') {
eventHandler();
} else {
document.addEventListener('DOMContentLoaded', eventHandler);
}
function eventHandler() {
var w = window.innerWidth;
var h = window.innerHeight;
document.getElementById("canvas").width = w;
document.getElementById("canvas").height = h;
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 40, 40);
}
</script>
</body>
</html>
</html>
index.xml
<Alloy>
<Window class="container">
<WebView id="www" url="/test.html"/>
</Window>
</Alloy>
index.tss
".container": {
backgroundColor:"white"
}
"#www":{
width: Ti.UI.FILL,
height: Ti.UI.FILL
}
It calculates the size when the body is ready. About the orientation change: you can either add it to the HTML part and recalculate once the device is rotated or you can set a fixed orientation in Titanium e.g. orientationModes : [Ti.UI.LANDSCAPE_LEFT, Ti.UI.LANDSCAPE_RIGHT] to prevent the app from going to portrait mode.
I have converted my .swf to HTML5 using Google Swiffy. But recently one Media Agency says the banners had a problem opening 2 new tabs instead of just one.
This is the code I always used and its having the double tab, the agency says it redirects to a route on the device ex: file:///Users/folder/folder/UNDEFINED and the other one to the DCM server.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="ad.size" content="width=300,height=250">
<script type="text/javascript">
var clickTag = "http://www.google.com"; </script>
<title>GOOGLE DCM</title>
<script type="text/javascript" src="https://www.gstatic.com/swiffy/v8.0/runtime.js"></script>
<script>
swiffyobject = { blablabla swiffy code};
</script>
<style>html, body {width: 100%; height: 100%}</style>
</head>
<body style="margin: 0; overflow: hidden">
<a href="javascript:window.open(window.clickTag)" style="width:300px; height:250px; display: block; position: absolute; z-index:999;">
<div id="swiffycontainer" style="width: 300px; height: 250px; border:1px solid black; box-sizing: border-box; ">
</div>
</a>
<script>
var stage = new swiffy.Stage(document.getElementById('swiffycontainer'),
swiffyobject, {});
stage.start();
</script>
</body>
</html>
so, I found a solution to this problem in this question
And I'm also not sure if this is correct for a DCM file since I don't know if an exit URL can be defined without a clicktag
[EDIT] The agency now tells me that they don't have the problem of two windows opening, but they got the error that no clicktag was found... and of course. So I don't know what to do here.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="https://s0.2mdn.net/ads/studio/Enabler.js"> </script>
<style>
#bg-exit {
background-color: rgba(255,255,255,0);
cursor: pointer;
height: 100%;
left: 0px;
position: absolute;
top: 0px;
width: 100%;
}
</style>
<title>GOOGLE DCM</title>
<script type="text/javascript" src="https://www.gstatic.com/swiffy/v8.0/runtime.js"></script>
<script>
swiffyobject = { blablabla swiffy code};
</script>
<style>html, body {width: 100%; height: 100%}</style>
</head>
<body style="margin: 0; overflow: hidden">
<div id="bg-exit">
<div id="swiffycontainer" style="width: 120px; height: 600px; border:1px solid black; box-sizing: border-box; ">
</div>
</div>
<script>
var stage = new swiffy.Stage(document.getElementById('swiffycontainer'),
swiffyobject, {});
stage.start();
</script>
<script>
window.onload = function() {
if (Enabler.isInitialized()) {
enablerInitHandler();
} else {
Enabler.addEventListener(studio.events.StudioEvent.INIT, enablerInitHandler);
}
}
function enablerInitHandler() {
}
function bgExitHandler(e) {
Enabler.exit('Background Exit');
}
document.getElementById('bg-exit').addEventListener('click', bgExitHandler, false);
</script>
</body>
</html>
I really need to fix this as soon as possible, otherwise I'll have to redo 35 banners in GWD in just a few hours so any help will be greatly appreciated. Thanks in advance.
looks like you have a bgExit event but no clicktag ?
var clickTag = "http://www.google.com";
GOOGLE DCM
I want to make a textarea where you can type inside of it, with a black background and green text and the ">_" blinks. How would i go about making this?
You can use this in your CSS:
textarea {
background-color: #000;
border: 1px solid #000;
color: #00ff00;
padding: 8px;
font-family: courier new;
}
<!doctype html>
<html>
<head>
<style>
</style>
<meta charset="utf-8" />
<title>Demo -TextArea</title>
<link rel="stylesheet" type="text/css" href="jqueryui.css">
<script src="jquery.js"></script>
<script src="jqueryui.js"></script>
<script>
$(document).ready(function() {
$("#myTextArea").html(">_");
setInterval(function(){
removeAndAppendBlickWraper();
},2000);
});
function removeAndAppendBlickWraper(){
removeAndAppendBlick(function(){
var text = $("#myTextArea").val(),
withCursortext =text+">_";
$("#myTextArea").val(withCursortext);
});
}
function removeAndAppendBlick(callback){
var text = $("#myTextArea").val();
var witoutCursor = text.substr(0,text.lastIndexOf(">_"));
$("#myTextArea").val(witoutCursor);
setTimeout(function(){
callback();
},1500);
}
</script>
</head>
<body>
<textarea id="myTextArea" style="background-color: black;color: green;" row="5"></textarea>
</body>
</html>
DEMO (thanks to amit kate)