canvas.getContext not doing much - javascript

I've got code that looks like this (I've put the alerts in for testing purposes!):
<html>
<head>
</head>
<body>
<canvas width=750,height=860,id="maze">HTML5?</canvas>
<noscript>Javascript?</noscript>
<script>
alert("hello! (1)");
var canvas = document.getElementById("maze");
alert("hello! (2)");
var context = canvas.getContext("2d");
alert("hello! (3)");
</script>
</body>
The first and second alerts fire off. The third doesn't. Am I overlooking something obvious?

Change this:
<canvas width=750,height=860,id="maze">HTML5?</canvas>
to this:
<canvas width="750" height="860" id="maze">HTML5?</canvas>
Demonstration

Remove the commas from your HTML tag:
<canvas width=750 height=860 id="maze">HTML5?</canvas>

Related

when using double buffering to draw image on canvas, cannot get the complete image?

this is my code, i use two canvas to drawimage to avoid flickering, but i cant get the full image when use this way, anyone can help please?
if i only use one canvas the image display fine, it seems the secondarycanvas that created by Javascript got some issue to display the image, but i can't find what's wrong. any help is appreciated!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Decorate</title>
</head>
<body>
<div class="content-box">
<canvas id="canvas" width="360" height="740" style="border:1px solid #d3d3d3"></canvas>
</div>
<script>
var c=document.getElementById("canvas");
var ctx = c.getContext("2d");
var secondaryCanvas=document.createElement("canvas");
var secondaryCtx=secondaryCanvas.getContext("2d");
secondaryCanvas.weight=c.weight;
secondaryCanvas.height=c.height;
var bgimg=new Image();
bgimg.src=imageEncoder[24].background;
bgimg.onload=function() {
secondaryCtx.drawImage(bgimg, 0, 0);
ctx.drawImage(secondaryCanvas,0,0);
}
</script>
</body>
</html>
I change secondaryCanvas.weight=c.weight; to secondaryCanvas.width=c.width; and your code seems to work now.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Decorate</title>
</head>
<body>
<div class="content-box">
<canvas id="canvas" width="360" height="740" style="border:1px solid #d3d3d3"></canvas>
</div>
<script>
var c=document.getElementById("canvas");
var ctx = c.getContext("2d");
var secondaryCanvas=document.createElement("canvas");
var secondaryCtx=secondaryCanvas.getContext("2d");
secondaryCanvas.width=c.width;
secondaryCanvas.height=c.height;
var bgimg=new Image();
bgimg.src= "https://picsum.photos/360/740"
bgimg.onload=function() {
secondaryCtx.drawImage(bgimg, 0, 0);
ctx.drawImage(secondaryCanvas,0,0);
}
</script>
</body>
</html>

How input canvas text box and button box?

I'm studying canvas programming.
I'm try to make canvas draw through text array and input type text ..
How make this same photo ?
HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>HTML5:Canvas</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600" style="border:2px solid#c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var Text_array = new Array("과자","모래","호두");
for( i=0; i<3; i++)
{
document.write(" " + Text_array[i]);
}
</script>
</body>
</html>
document.write writes text to the document. You need to write it to the canvas element. Canvas provides it's own methods for this: fillText and strokeText, so you'll need to use one of these.
You'll also need to call the javascript for when you want this to happen. In my code below I'm calling it from a click on a link, but it could equally be called from an onload event, a button click etc. I'm also providing x and y coordinates for where I want the text written on the canvas.
<!DOCTYPE html>
<html>
<head>
<title>HTML5:Canvas</title>
<script type="text/javascript">
function writeCanvas() {
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font = "20px Arial";
var Text_array = new Array("과자","모래","호두");
for( i=0; i<3; i++)
{
ctx.fillText(Text_array[i], 10, (i+1) * 50);
}
}
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600" style="border:2px solid#c3c3c3;">
Your browser does not support the canvas element.
</canvas><br>
Write
</body>
</html>

I am unable to implement JCanvas

I am new to learn JCanvas. I am trying to implement a simple JCanvas program.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
<script src='jcanvas.min.js'></script>
</head>
<body>
<canvas id="drawingCanvas" width="500" height="500" style="border:1px solid black;align:center;"></canvas>
<script>
var canvas = document.getElementById("drawingCanvas");
var ctx = canvas.getContext("2d");
$('canvas').drawArc({
strokeStyle: 'green',
draggable: true,
x:100, y:100,
radius: 50
});
</script>
</body>
</html>
But I am unable to Implement the above.
The Circle I am trying to draw here is not getting displayed on the canvas.
What Am I doing wrong?
Looks like your code is quite fine itself. Consider wrapping your code in $(document).ready(function () {});, like this:
<script>
$(document).ready(function () {
$('canvas#drawingCanvas').drawArc({
strokeStyle: 'green',
draggable: true,
x:100, y:100,
radius: 50
});
});
</script>
This guarantees that your code will executed when the whole DOM structure is loaded in browser memory and ready to interact with JavaScript. See jQuery docs for more details.
I've also created jsFiddle, where your code just works. I attached the jCanvas using URL from here, so it might stop working occasionally.
UPDATE: removed unused variables from the code, added id to jQuery selector.
UPDATE2: Without jsFiddle, it should look like that
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Sample</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://calebevans.me/projects/jcanvas/resources/jcanvas/jcanvas.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('canvas#drawingCanvas').drawArc({
strokeStyle: 'green',
draggable: true,
x:100, y:100,
radius: 50
});
});
</script>
</head>
<body>
<canvas id="drawingCanvas" width="500" height="500" style="border:1px solid black;align:center;"></canvas>
</body>
</html>
UPDATE3: Please do not use jCanvas attaching like in the sample above, the link was grabbed from jCanvas showroom and is not supposed to be reliable CDN. It might be changed or removed, and it might not be ready to high load.
there are probably other ways, but this works. I sourced jCanvas and jQuery internally
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script src='jcanvas.min.js'></script>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
function init(){
$("canvas").drawArc({
strokeStyle: 'green',
draggable: true,
x:100, y:100,
radius: 50
});
}
</script>
</head>
<body onload="init()">
<canvas id="canvas" width="500" height="500" style="border:1px solid black;align:center;"></canvas>
</body>
</html>

How to change the background color of form input when page loads?

(I know I can do it directly with input style, but I have other intentions)
I tried several ways
<script> document.getElementById('myTextBox').style.backgroundColor = 'red'; </script>
<script> document.form1.myTextBox.style.backgroundColor = 'red'; </script>
I tried putting it on head, on body. I don't know what else to do
use onload
<body onload="style()">
And put your code in a function, at the bottom of the body
<script type="text/javascript">
function style(){
document.getElementById('myTextBox').style.backgroundColor = 'red';
}
</script>
</body>
You need to tell the browser when to execute that statement in your case.
Putting it as a function call in the body's onload will do.
Look at this example
<html>
<head>
<script>
function FooBarFunction()
{
document.getElementById('foo').style.backgroundColor = 'red';
}
</script>
</head>
<body onload="FooBarFunction()">
<input type="textbox" id="foo">
</body>
</html>
Try this..
$(function(){
$("#myTextBox").css("background","red");
});
Example : http://jsfiddle.net/8BnrF/
you can do it by put your code in tag of body
<body >
<script> document.getElementById('myTextBox').style.backgroundColor = 'red'; </script>
simply put your scripts before this
e.g ...
<script> document.form1.myTextBox.style.backgroundColor = 'red'; </script>
</body>
</html>
or edit your script like this
<script>window.onload =function(){ document.getElementById('myTextBox').style.backgroundColor = 'red';
}
</script>

Animating a gif on hover

I've looked for the answer for this and I found it, but I don't know how to use it.
Stop a gif animation onload, on mouseover start the activation
Guffa's answer to that question is exactly what I want, but I don't know how to use that code.
I have the jquery plugin, but where do I put the code (not the plugin; the code that was in Guffa's answer)? How do I use it in reference to the images? Is there a function I have to call to get it to work? If so, what would be the best way to call it?
Sorry for asking a question that has already been answered, but his answer wasn't specific enough and I couldn't comment to ask him for a more specific answer.
Here is a working example for what you need - http://jsfiddle.net/EXNZr/1/
<img id="imgDino" src="http://bestuff.com/images/images_of_stuff/64x64crop/t-rex-51807.jpg?1176587870" />
<script>
$(function() {
$("#imgDino").hover(
function() {
$(this).attr("src", "animated.gif");
},
function() {
$(this).attr("src", "static.gif");
}
);
});
</script>
I haven't read the link, however the easiest way to do this is to change the img tags src attribute with javascript on hover like this (jQuery)
$(function() {
$('a').hover(function() {
$(this).attr('src','path_to_animated.gif');
},function() {
$(this).attr('src','path_to_still.gif');
}
});
No plugins required... you might want to preload the animated gif by adding $('<img />',{ src: 'path_to_animated.gif'}); before the hover bind.
Hope that helps
Try this if you are OK to use canvas:
<!DOCTYPE html>
<html>
<head>
<style>
.wrapper {position:absolute; z-index:2;width:400px;height:328px;background-color: transparent;}
.canvas {position:absolute;z-index:1;}
.gif {position:absolute;z-index:0;}
.hide {display:none;}
</style>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script>
window.onload = function() {
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
var img = document.getElementById("gif");
ctx.drawImage(img, 0, 0);
}
$(document).ready(function() {
$("#wrapper").bind("mouseenter mouseleave", function(e) {
$("#canvas").toggleClass("hide");
});
});
</script>
</head>
<body>
<div>
<img id="gif" class="gif" src="https://www.macobserver.com/imgs/tips/20131206_Pooh_GIF.gif">
<canvas id="canvas" class="canvas" width="400px" height="328px">
</canvas>
<div id="wrapper" class="wrapper"></div>
</div>
</body>
</html>

Categories

Resources