On a page with the following code, the textarea doesn't update with text that I type, until I click off of it. Why?
<html>
<head>
<style>
#canvas {
float: left;
}
</style>
<script>
window.onload = function() {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.translate(0, 0);
}
</script>
</head>
<body>
<canvas id="canvas" width=439></canvas>
<textarea></textarea>
</body>
</html>
I've discovered that the textarea will update properly if I do any one of the following:
Change the width of the canvas to 438 or less
Remove ctx.translate(0,0);
Remove float: left;
This only happens in Chrome, I can't reproduce in Firefox.
I'm running Chrome 39.0.2171.95 and Firefox 34.0.5
That is really odd behavior. You can fix it by adding relative positioning to the textarea:
<html>
<head>
<style>
#canvas {
float: left;
}
textarea {
position: relative;
}
</style>
<script>
window.onload = function() {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.translate(0, 0);
}
</script>
</head>
<body>
<canvas id="canvas" width=439></canvas>
<textarea></textarea>
</body>
</html>
Related
Goal:
I would like to select a color through color picker HTML element and immediately after this change I would like to see canvas element in the same color.
The issue: I can select color through the color picker, but my canvas rectangle is not changing the color. All of the questions are focused on more robust solutions (i.e. with JBOSS or jQuery or SpringBoot)
Like here:
Bootstrap colorpicker basic example does not work
Primefaces Component - colorPicker: Popup does not render,
What I tried:
Read similar questions here
Different ID names
Different method name
Different color in the white CSS class
Different browser
The different access method for canvas, see below:
function setColorAccordingToColorPicker() {
var rectangle = getElementById("canvasColorpicker");
var colorinput = document.getElementById("colorPicker");
var color = colorinput.value;
rectangle.fillStyle = color;
rectangle.fillRect(20, 20, 60, 60);
}
None of them helped.
MCVE:
HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
<title>Example</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<canvas id="canvasColorpicker" class="white"></canvas>
<input type="color" value="#001A57" onchange="setColorAccordingToColorPicker()" id="colorPicker">
<script src="javascript.js"></script>
</body>
</html>
Javascript
function setColorAccordingToColorPicker() {
var rectangle = getElementById("canvasColorpicker");
var colorinput = document.getElementById("colorPicker");
var color = colorinput.value;
rectangle.style.backgroundColor = color;
}
CSS
.white {
background-color: #001A57;
}
canvas {
width: 200px;
height: 100px;
margin: 10px;
border: 1px solid lighgrey;
}
Can someone help and see what's wrong? Thanks!
function setColorAccordingToColorPicker() {
var rectangle = document.getElementById("canvasColorpicker");
var colorinput = document.getElementById("colorPicker");
var color = colorinput.value;
rectangle.style.backgroundColor = color;
}
.white {
background-color: #001A57;
}
canvas {
width: 200px;
height: 100px;
margin: 10px;
border: 1px solid lighgrey;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
<title>Example</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<canvas id="canvasColorpicker" class="white"></canvas>
<input type="color" value="#001A57" onchange="setColorAccordingToColorPicker()" id="colorPicker">
<script src="javascript.js"></script>
</body>
</html>
One little change needed:
Change this: var rectangle = getElementById("canvasColorpicker");
To: var rectangle = document.getElementById("canvasColorpicker");
I was testing this sample code and I obtained the error
Uncaught TypeError: Cannot set property 'width' of null
where "canvas.width = ...".
Could you help me? Here the code:
var canvas = document.getElementById("sim00");
var dim = {
w: 600,
h: 480
};
canvas.width = Math.min(dim.w, window.innerWidth - 20);
canvas.height = Math.min(dim.h, window.innerHeight - 20);
canvas {
border: 1px solid #d3d3d3;
max-width: 100%;
height: auto;
}
<canvas id="sim00" width="300" height="300"></canvas>
I had the same issue, What worked is that I changed the position of my script tag.
Automatically when I generate my HTML skeleton, the script tag appears in the <head>
but after placing it in the <body>, my code worked.
<html>
<head>
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<canvas id="canvas" width="1950px" height="800px"></canvas>
<canvas id="canvasbg" width="1950px" height="800px"></canvas>
</body>
</html>
<html>
<head>
</head>
<body>
<canvas id="canvas" width="1950px" height="800px"></canvas>
<canvas id="canvasbg" width="1950px" height="800px"></canvas>
<!-- I omitted some code for simplicity. -->
<!-- Bottom line, Check the placement of your js file. -->
<script type="text/javascript" src="main.js"></script>
</body>
</html>
You have to use style to change css from js.
canvas.style.width = Math.min(dim.w, window.innerWidth - 20);
canvas.style.height = Math.min(dim.h, window.innerHeight - 20);
<!DOCTYPE html>
<html>
<body>
<div id="container">
<canvas id="myCanvas" width=350 height=250>
</canvas>
</div>
</body>
</html>
to change the size use
var myCanvas = document.querySelector("#myCanvas");
myCanvas.width = 350;
myCanvas.height = 250;
i am making a basic game loop so i started with the basic cube exercise and i wrote the exemple below but it isn't working. i tried to see if there is something misspell but i could find nothing aparently.
<!DOCTYPE HTML>
<html>
<head>
<title>Game</title>
<style type="text/css">
#GameCanvas {
background-color: #FF0000;
}
</style>
</head>
<body>
<canvas id="GameCanvas" width="1000" height="600"></canvas>
<script type="text/javascript">
var canvas = document.findElementById("GameCanvas");
var graphics = canvas.getContext("2d");
function Update() {}
function Draw() {
graphics.beginPath();
graphics.fillRect(20, 20, 50, 50);
graphics.fillStyle = "#FFFFFF";
graphics.fill();
graphics.closePath();
}
function GameLoop() {
Update();
Draw();
requestAnimFrame(GameLoop);
}
requestAnimFrame(GameLoop);
</script>
</body>
</html>
You have a couple bugs here, document.findElementById does not exist, change it to document.getElementById.
requestAnimFrame should be changed to requestAnimationFrame in both instances.
With these changes your loop runs and draws a square to the screen.
<!DOCTYPE HTML>
<html>
<head>
<title>Game</title>
<style type="text/css">
#GameCanvas {
background-color: #FF0000;
}
</style>
</head>
<body>
<canvas id="GameCanvas" width="1000" height="600"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("GameCanvas");
var graphics = canvas.getContext("2d");
function Update() {}
function Draw() {
graphics.beginPath();
graphics.fillRect(20, 20, 50, 50);
graphics.fillStyle = "#FFFFFF";
graphics.fill();
graphics.closePath();
}
function GameLoop() {
Update();
Draw();
requestAnimationFrame(GameLoop);
}
requestAnimationFrame(GameLoop);
</script>
</body>
</html>
I have some JS that displays and plays audio.
However the load time is very long, I following this tutorial (http://www.dzyngiri.com/show-loading-image-while-the-website-loads/) to install a preloader.
I'm seeing the preloaded image appearing, however it goes away well before the entire page is loaded.
I've tried variation between $(window).load & $(document).ready neither shows the image until the JS and audio plays.
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>cal christmas tree canvas 005</title>
<style type="text/css">
#spinner {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url(images/Bitmap12.jpg) 50% 50% no-repeat #ede9df;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="cal christmas tree canvas 005.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript">// <![CDATA[
$(window).load(function() { $("#spinner").fadeOut("slow"); })
// ]]></script>
<script>
var canvas, stage, exportRoot;
function init() {
canvas = document.getElementById("canvas");
images = images||{};
var loader = new createjs.LoadQueue(false);
loader.installPlugin(createjs.Sound);
loader.addEventListener("fileload", handleFileLoad);
loader.addEventListener("complete", handleComplete);
loader.loadManifest(lib.properties.manifest);
}
function handleFileLoad(evt) {
if (evt.item.type == "image") { images[evt.item.id] = evt.result; }
}
function handleComplete() {
exportRoot = new lib.calchristmastreecanvas005();
stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
stage.update();
stage.enableMouseOver();
createjs.Ticker.setFPS(lib.properties.fps);
createjs.Ticker.addEventListener("tick", stage);
}
function playSound(id, loop) {
createjs.Sound.play(id, createjs.Sound.INTERRUPT_EARLY, 0, 0, loop);
}
</script>
</head>
<body onload="init();" style="background-color:#D4D4D4">
<div id="spinner"></div>
<canvas id="canvas" width="960" height="640" style="background-color:#FFFFFF"></canvas>
</body>
</html>
You call your init() function at the exact same time as you call your loader disappering function
<body onload="init();"
and
$(window).load(function() {} / or window.onload = function() {}
are the same thing with a different name.
You should take init() out of the onload tag and place it anywhere in your script, out of any onload events.
I am trying to draw a red rectangle on my HTML5 canvas. Here is my HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<title>My Canvas Experiment</title>
<link rel="stylesheet" type="text/css" href="main.css" />
<script src="plotting.js"></script>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
</head>
<body>
<canvas id="plot"></canvas>
</body>
</html>
Here is plotting.js:
document.onload = function() {
var c = document.getElementById("plot");
var ctx = c.getContext("2d");
ctx.fillStyle("#f00");
ctx.fillRect(0, 0, 175, 40);
}
Here is main.css:
body { margin:100px; }
article, aside, figure, footer, header, hgroup, menu, nav, section {
display:block;
}
#plot {
width: 500px;
height: 400px;
}
Why is the page blank? Chrome Web Developer Console issues no errors.
Replace:
ctx.fillStyle("#f00");
with:
ctx.fillStyle="#f00";
Use window.onload instead of document.onload, (keeping #stewe's suggestion).
DEMO
Replacectx.fillStyle('#f00'); to ctx.fillStyle = 'red'; because fillStyle is a variable and NOT the function.
I've been having issues all morning with javascript not drawing my shapes. Turns out you HAVE to set the width and height on the canvas tag in HTML, and not through the CSS, or the shapes will not draw.
example:
<canvas id="map" width="500" height="500"></canvas>