After I set the canvas in HTML for a certain size, for example, 800x600, the script will not fill for me, but if I set it to be 150x150, it will. Why is it happening? Can it be fixed? Any help would be appreciated.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Let's Draw!</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="script.js"></script>
</head>
<body onload="drawShape();">
<canvas id="my_canvas" width="800" height="600">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>
</body>
</html>
Javascript:
function drawShape(){
var canvas = document.getElementById('my_canvas');
if (canvas.getContext){
var ctx = canvas.getContext('2d'); // ctx = context
ctx.fillStyle = "red";
// Filled triangle
ctx.beginPath();
ctx.moveTo(25,25);
ctx.lineTo(105,25);
ctx.lineTo(25,105);
ctx.fill();
// Stroked triangle
ctx.beginPath();
ctx.moveTo(125,125);
ctx.lineTo(125,45);
ctx.lineTo(45,125);
ctx.closePath();
ctx.stroke();
} else {
alert('You need Safari or Firefox 1.5+ to see this demo.');
}
}
800x600 is relatively small and should be supported by all reasonable browsers that support canvas. Canvases 4 times the size should work. What browser/OS are you using?
Related
<!DOCTYPE html>
<html>
<head>
<title>Snake!!</title>
<link rel="stylesheet" href ="snake.css">
</head>
<body scroll="no" style="overflow: hidden">
<div class="canvas-container">
<img src="Apple.png" width="0" height="0" id="Apple"><!--Image-->
<canvas id="myCanvas"></canvas> <!-- canvas for the game-->
<button type="button" onclick="restartGame()"class="Restartbutton" id="myButton">Restart</button>
<textarea class="score"id="score" ></textarea>
<script src="snake.js"></script>
</div>
</body>
</html>
const Canvas = document.getElementById("myCanvas");<!-- start of JS-->
const ctx = Canvas.getContext("2d");
const imgApple = document.getElementById("Apple");
function draw(){
ctx.drawImage(imgApple,200,200,50,50);<!-- just random numbers to place the Apple at-->
ctx.fill();
requestAnimationFrame(draw);
}
requestAnimationFrame(draw);
I wanted to make an Snake game. I drew all the canvas and buttons for the game and now I just want to have a player or an Apple in the game as Images. I need help.
Thx already!
The problem is that you didn't specify initial dimensions for your canvas - thus it's using the defaults of width=300 and height=150. Of course this wouldn't be much of a problem if there wouldn't be this line:
ctx.drawImage(imgApple,200,200,50,50);
This means it tries to draw the apple at screen position x=200 and y=200 - outside of the visible area of the canvas.
Try it with
ctx.drawImage(imgApple,200,100,50,50);
I'm trying to draw Unicode FontAwesome icons on Canvas, but the result I see (below) is not exactly what I expected. How do I draw these correctly? I got the Unicode from the FontAwesome webpage. For example https://fontawesome.com/icons/500px?style=brands
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "15px FontAwesome";
ctx.fillStyle = "black";
ctx.fillText('\uf0ac', 170, 55);
<head><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
</head>
<body>
<canvas id="myCanvas"></canvas></body>
The problem is most likely with refreshing the canvas after the fonts have been loaded.
In this post they provide a better event based solution.
but to get my point across I have used a less elegant solution with using setinterval
you can stop the timer after your fonts have been redrawn.
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw,ch;
setInterval(()=>{
var ctx=canvas.getContext("2d");
ctx.clearRect(0,0,300,300);
ctx.font='48px fontawesome';
ctx.fillText('\uf0ac',20,75);
},1000)
});
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<head>
</head>
<body>
<h4>Font Awesome glyphs drawn onto html5 canvas</h4>
<canvas id="canvas" width=300 height=300></canvas>
</body>
I'm working with HTML5 Canvas now. I have one image file and and a mug image file. I want the image file to be drawn on that cylinder surface. Something like the images below.
Are there any Javascript canvas (or maybe SVG) libraries that can help me archive that?
Thank you very much
You can achieve your "wrap" effect by slicing your image into 1px wide vertical slices and changing the "Y" coordinate of each slice to fit the curve of your cup.
Here's example code that uses this technique to "stretch" an image.
Feel free to modify this code to fit along the curve of your cup.
Example code and a Demo: http://jsfiddle.net/m1erickson/krhQW/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var img=new Image();
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/warp.png";
function start(){
var iw=img.width;
var ih=img.height;
canvas.width=iw+20;
canvas.height=ih+20;
var x1=0;
var y1=50;
var x2=iw;
var y2=0
var x3=0;
var y3=ih-50;
var x4=iw;
var y4=ih;
// calc line equations slope & b (m,b)
var m1=Math.tan( Math.atan2((y2-y1),(x2-x1)) );
var b1=y2-m1*x2;
var m2=Math.tan( Math.atan2((y4-y3),(x4-x3)) );
var b2=y4-m2*x4;
// draw vertical slices
for(var X=0;X<iw;X++){
var yTop=m1*X+b1;
var yBottom=m2*X+b2;
ctx.drawImage( img,X,0,1,ih, X,yTop,1,yBottom-yTop );
}
// outline
ctx.beginPath();
ctx.moveTo(x1,y1);
ctx.lineTo(x2,y2);
ctx.lineTo(x4,y4);
ctx.lineTo(x3,y3);
ctx.closePath();
ctx.stroke();
}
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
I have created an HTML5 canvas game which involves dragging and selecting objects(words) from two canvases. The screen also has two buttons. But unfortunately my program is hard coded in terms of selecting words as I have entered the co-ordinates where the words are drawn on canvas. My screen resolution is 1366 x768. Now whenever the resolution is changed, the buttons move somewhere else and the mouse never selects the dragged words rather some words else above it. I am in a big trouble now, please help !!
<html>
<head>
<title>Word Search</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type = text/css href="style.css">
<script type="text/javascript" src="keywords.js"></script>
<script type="text/javascript" src="game.js"></script>
<script type="text/javascript" src="highlight.js"></script>
<script type="text/javascript" src="grid.js"></script>
<script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<h1 id="heading">Find Keywords</h1>
<h3 id="results">Drag through the lettered Squares..!</h3>
<canvas id ='canvas1' height = 450 width="450" style= "border :1px solid black"> </canvas>
<canvas id ='canvas2' height = 450 width="250" style= "border :1px solid black"></canvas>
<input type='button' value="HIGHLIGHT ALL" id="button1" onclick="highlight();" />
<input type='button' value="NEXT" id="button2" onclick="next();"/>
<script>
var words =[];
window.onload = function(){
begin();
};
function begin()
{
wordSearchPuzzle();
}
function wordSearchPuzzle()
{
words.length=0;
words = getwords(8);
var puz =wordfind(words);
game(words,puz);
}
function next()
{
var canvas = document.getElementById("canvas1");
var ctx1 = canvas.getContext("2d");
var canvas2 = document.getElementById("canvas2");
var ctx2 = canvas2.getContext("2d");
ctx1.clearRect(0, 0, canvas.width, canvas.height);
ctx2.clearRect(0, 0, canvas2.width, canvas2.height);
wordSearchPuzzle();
}
</script>
</body>
</html>
This is possible, I have done it int he past with a canvas that would be dynamically sized based on the screen size.
If I remember correctly i did something like this.
I placed the canvas in a div, and gave the div a dynamic width, something like style="width: 30%"
I placed the canvas inside this div and tied css to give the canvas a style="width: 100%"
<div style="width:30%">
<canvas id="can" style="width:100%"></canvas>
</div>
I tied into the window resized event and read the client size to determine the element width and height to change the canvas
window.resize = function(){
var canvas = document.getElementById("can");
canvas.width = canvas.clientWidth;
canvas.height = //some value based on width
}
You then need to redraw your canvas as resizing will clear the canvas of all content
I'm trying to build a sort of generator which lets you put text over an image. Now it's all working great, but i'm trying to create some thumbnails which let me change the background image of the canvas.
Now this is my first attempt with a canvas and i've tried alot of things, but the closest i've come and where i thought my little piece of code would work was, it's given me 0 errors:
function testbackgroundchange() {
img.src = "background_1.jpg";
ctx.clearRect(0, 0, canvas.width, canvas.height);
document.getElementById('scale').value = 1;
document.getElementById('rotate').value = 0;
x = canvas.width/2 - img.width/2;
y = canvas.height/2 - img.height/2;
ctx.drawImage(img,x,y);
imgTransform();
}
So what i'm trying to here is onclick of a thumbnail, change the background image of the canvas.
I've added an JSFiddle for better understanding of the problem: http://jsfiddle.net/29M7P/1/
If anyone could point me in the right direction that would be great. (sorry i'm a beginner)
You can listen for clicks on your thumbnails with thumbnail.onclick
img1.onclick=function(){changeImage(this);};
img2.onclick=function(){changeImage(this);};
And you can change the canvas image like this:
function changeImage(img){
ctx.clearRect(0,0,cw,ch);
ctx.drawImage(img,0,0);
}
A Demo: http://jsfiddle.net/m1erickson/88n3K/
Code example:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
var imgCount=2;
var img1=new Image();img1.crossOrigin="anonymous";img1.onload=start;img1.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house204-1.jpg";
var img2=new Image();img1.crossOrigin="anonymous";img2.onload=start;img2.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house204-2.jpg";
function start(){
if(--imgCount>0){return;}
document.body.appendChild(img1);
document.body.appendChild(img2);
img1.onclick=function(){changeImage(this);};
img2.onclick=function(){changeImage(this);};
}
function changeImage(img){
ctx.clearRect(0,0,cw,ch);
ctx.drawImage(img,0,0);
}
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=300 height=300></canvas><br>
<h4>Click on an image below to drawImage to canvas</h4><br>
</body>
</html>