I have a 3 kiddie games . All of them is tracing/sketching. The game is to sketch lines, letters and numbers.
I already started the sketching the lines and I used sketch.js from http://intridea.github.io/sketch.js/ , which is not really 100% working.
Now my question is, how to do it through letters and numbers.
I have created a sample but it's not really working. So the game is like this. there's a letter 'A', then the user(kid) will trace that A. But in my sample, the letter will gone. So if the user had already traced/sketch it, the "next" button will appear.
<!DOCTYPE html>
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://intridea.github.com/sketch.js/lib/sketch.min.js"></script>
<canvas id="myCanvas" width="200" height="300"
style="border:1px solid #d3d3d3;">
Your browser does not support the canvas element.
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "150px Arial";
ctx.strokeText("A",20,200);
$('#myCanvas').sketch({
defaultColor: "#ff0000",
defaultSize: 10
});
</script>
</body>
</html>
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've just started to learn easeljs. I have tried to create a rectangle which will follow the mouse coordinates, but it is not working. What's wrong here and how it can be fixed?
fiddle
<html>
<head>
<style>
*{margin:0px;padding:0px;}
</style>
<script src="easeljs.js"></script>
</head>
<body>
<canvas id="mycanvas" width="500" height="500" style="border:1px solid black;"></canvas>
<script>
function init(){
var canvas=document.getElementById('mycanvas');
var ctx=canvas.getContext('2d');
var stage=new createjs.Stage(canvas);
var shape=new createjs.Shape();
shape.graphics.beginFill('red').drawRect(300,200,40,40);
stage.addChild(shape);
createjs.Ticker.addEventListener("tick",tick);
function tick(event){
shape.x=stage.mouseX;
shape.y=stage.mouseY;
stage.update(event);
}
}
window.onload=init;
</script>
</body>
</html>
You have set the x and y of your rectangle to be 300 and 200 respectively, so if you set those to 0, then the rectangle will start in the right place and follow the mouse as expected.
shape.graphics.beginFill('red').drawRect(0,0,40,40);
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?
I'm using a html 5 to draw a line on canvas with a button.
Does anybody know why?
<!DOCTYPE html>
<html>
<body onload="">
<canvas id="myCanvas" width="400" height="200" style="border:1px solid #000000;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<button name="draw" onclick="drawLine()">Draw Line</button>
<script type="text/javascript" src="canvashtml5.js" ></script>
</body>
</html>
darwLine function is on the external javascript as canvasHtml5.js:
function drawLine(){
var canvas = document.getElementById(myCanvas);
var context = canvas.getContext("2d");
context.moveTo(0,0);
context.lineTo(300,150);
context.stroke();
}
myCanvas
{
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FFFF00";
ctx.fillRect(0,0,150,75);
}
I forgot to put myCanvas to quot like this: "myCanvas".
this var canvas = document.getElementById(myCanvas); must be like var canvas = document.getElementById("myCanvas");
Alternative:
Add an event listener to your button like so:
document.getElementById('drawLineBtn').addEventListener('click', drawLine, false);
This will cut down on your work in the future. See http://jsfiddle.net/kbXAN/23/
I am learning HTML5 and can't get anything to appear on the screen. It just comes up totally white. All of the code is below.
HTML:
<head>
<script src="canvas.js"></script>
</head>
<body>
<section id="main">
<canvas id="canvas" width="600" height="400">
Get Chrome
</canvas>
</section>
</body>
</html>
JavaScript
function doFirst(){
var x = document.getElementById('canvas');
canvas = x.getContext('2d');
canvas.shadowOffsetX = 4;
canvas.shadowOffsetY = 4;
canvas.shadowBlur = 6;
canvas.shadowColor = 'rgba(0,0,255,.5)';
canvas.font="36px Tahoma";
canvas.textAlign="end";
canvas.strokeText("omgjj", 300, 500);
}
window.addEventListener("load", doFirst, false);
Your Y coordinate is off the canvas. Change this:
canvas.strokeText("omgjj", 300, 500);
To this:
canvas.strokeText("omgjj", 300, 200);
And your text will appear: