I want to add 10 to the position of the ball, but it adds position to the duplicated shape. I tried to make a separate function but it did not work.
HTML5 Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<canvas id="Game" width="800" height="600" style="border: 1px solid #d3d3d3;
background-color: #f1f1f1;"></canvas>
<script src="Game.js"></script>
</body>
</html>
Javascript Code:
var GameCanvas = GameCanvas = document.getElementById("Game");
var GameCtx = GameCtx = GameCanvas.getContext("2d");;
var BallSprite = 50;
window.onload = function () {
setInterval(HoldSprites, 100);
}
function HoldSprites() {
BallSprite = BallSprite + 10;
GameCtx.beginPath();
GameCtx.arc(BallSprite, 50, 40, 0, 2 * Math.PI);
GameCtx.stroke();
}
Related
I'm trying to clear one line by drawing another one on top of it on HTML canvas. But the second line becomes semi transparent for some unknown to me reason.
index.html
<!DOCTYPE html>
<head>
<script src="scripts.js" type="text/javascript"></script>
</head>
<html>
<body onload = "onload()">
<canvas id = "canvas" style="border: solid 1px; width: 200px; height: 200px;"></canvas>
</body>
</html>
scripts.js
var canvas,ctx;
const onload = () =>{
canvas = document.querySelector("#canvas")
ctx = canvas.getContext('2d')
drawLine("#ff0000")
drawLine("#ffffff")
}
const drawLine = (color) =>{
ctx.beginPath()
ctx.strokeStyle = color
ctx.moveTo(0,0)
ctx.lineTo(200,200)
ctx.stroke()
ctx.closePath()
}
var canvas,ctx;
const onload = () =>{
canvas = document.querySelector("#canvas")
ctx = canvas.getContext('2d')
drawLine("#ff0000")
drawLine("#ffffff")
}
const drawLine = (color) =>{
ctx.beginPath()
ctx.strokeStyle = color
ctx.moveTo(0,0)
ctx.lineTo(200,200)
ctx.stroke()
ctx.closePath()
}
<!DOCTYPE html>
<head>
<script src="scripts.js" type="text/javascript"></script>
</head>
<html>
<body onload = "onload()">
<canvas id = "canvas" style="border: solid 1px; width: 200px; height: 200px;"></canvas>
</body>
</html>
I have worked through the dosbox Div to find the canvas, but once I have found the node holding the canvas how can I reference it?
Getting the context of dbGranChild[0] just results in an error..
Im trying to build an array of the pixels that make up the dosbox window, so thought using the canvas get image and looping through as frames change would be one way. If there is a better way altogether than my above attempt happy to take that as an answer.
Code: http://plnkr.co/edit/MC1n9HfwWcqXlAk95XCO?p=preview
<!doctype html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>js-dos api</title>
<style type="text/css">
.dosbox-container { width: 640px; height: 400px; }
.dosbox-container > .dosbox-overlay { background: url(https://js-dos.com/cdn/digger.png); }
.dosbox-start { font-size: 35px !important; }
</style>
</head>
<body>
<div id="dosbox"></div>
<br/>
<button onclick="dosbox.requestFullScreen();">Make fullscreen</button>
<script type="text/javascript" src="https://js-dos.com/cdn/js-dos-api.js"></script>
<script type="text/javascript">
var dosbox = new Dosbox({
id: "dosbox",
onload: function (dosbox) {
dosbox.run("https://js-dos.com/cdn/digger.zip", "./DIGGER.COM");
},
onrun: function (dosbox, app) {
console.log("App '" + app + "' is runned");
}
});
var dosboxId = document.getElementById('dosbox');
dbChild = dosboxId.childNodes;
dbGranChild = dbChild[0].childNodes;
console.log(dbGranChild[0])
</script>
</body>
</html>
See the w3Schools tutorial.
First, you need to use a <canvas> tag instead of a <div>.
That is, replace this:
<div id="dosbox"></div>
with something like this:
<canvas id="dosbox" width="200" height="100" style="border:1px solid #000000;">
</canvas>`
Second, replace this code:
var dosboxId = document.getElementById('dosbox');
dbChild = dosboxId.childNodes;
dbGranChild = dbChild[0].childNodes;
console.log(dbGranChild[0])
With something like this:
var c = document.getElementById("dosbox");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
I am having trouble drawing a triangle on a canvas. Triangle: equilateral triangle with 2 points on the x-axis. So what I was thinking: I start in the bottom right corner, move up to the next point, and then move to the last point in the lower left. Here is what I have:
<!doctype html>
<html lang="en">
<head>
<meta charset= "UTF-8">
<script type="text/JavaScript">
function draw() {
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
var sWidth = screen.width;
var sHeight = screen.height;
var path=new Path2D();
path.moveTo((sWidth/2)+50,sHeight/2);
path.lineTo((sWidth/2),(sHeight/2)-50);
path.lineTo((sWidth/2)-50,sHeight/2);
ctx.fill(path);
}
}
</script>
</head>
<body onload="draw();">
<div align = "center">
<canvas id = "canvas">
</canvas>
</div>
</body>
</html>
Nothing gets drawn. I read: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes, but I'm not sure what I messed up.
You need to give a size to your canvas. Either with CSS, HTML or in JavaScript
Here is a snippet that works :
function draw() {
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
var sWidth = canvas.width;
var sHeight = canvas.height;
var path=new Path2D();
path.moveTo((sWidth/2)+50,sHeight/2);
path.lineTo((sWidth/2),(sHeight/2)-50);
path.lineTo((sWidth/2)-50,sHeight/2);
ctx.fill(path);
}
}
draw();
<!doctype html>
<html lang="en">
<head>
<meta charset= "UTF-8">
<style>canvas { width: 200px; height: 200px; border: 1px solid red; }</style>
</head>
<body>
<canvas id="canvas">
</canvas>
</body>
</html>
I'm trying to put the image file "sticky.png" into a canvas box, but all I'm getting is a blank canvas. Can anyone point out what I'm doing wrong and/or give me code that works?
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>
<body>
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var sticky = new Image();
sticky.onload = function() {
context.drawImage(sticky, 0, 0);
sticky.src = "sticky.png";
};
</script>
</body>
You need to include the sticky.src before sticky.onload.
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var sticky = new Image();
sticky.src = "sticky.png";
sticky.onload = function() {
context.drawImage(sticky, 0, 0);
};
</script>
</body>
Fiddle
sometimes as a workAround we have to load the image before the canvas. It's very unusual, but it WORKS. And then you just hide the image. Don't forget to use setTimeOut to wait till image is loaded!
setTimeout("paintStar()", 2000);
function paintStar() {
var canva3 = document.getElementById('canvas3');
canva3.width = 640;
canva3.height = 480;
var ct3 = canva3.getContext('2d');
var img = new Image();
img.src = 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ3DlDGTyfaFMtUf9GYykLglqfS8GzHbeKRV5vDfHraV1ihNIYo';
ct3.drawImage(img, 0, 0);
ct3.drawImage(img, 0, 0, 20, 20, 10, 200, 20, 20);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CANVAS</title>
<style>
.canvas-1 {
width: 640px;
height: 480px;
border: 1px solid #777;
}
.img-1 {
display: none;
}
</style>
<script src="canva3.js" defer></script>
</head>
<body>
<div class="img-1"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ3DlDGTyfaFMtUf9GYykLglqfS8GzHbeKRV5vDfHraV1ihNIYo" alt=""></div>
<canvas id="canvas3" style="border: 2px solid #444;">Doesn't work!</canvas>
</body>
</html>
So I'm trying to work on a Canvas demo, and I want this square to move from one side to the other, but I can't figure out how to call JavaScript in a way that repeats every 60 seconds.
Here's what I got so far:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Canvas test</title>
<meta charset="utf-8" />
<link href="/bms/style.css" rel="stylesheet" />
<style>
body { text-align: center; background-color: #000000;}
canvas{ background-color: #ffffff;}
</style>
<script type="text/javascript">
var x = 50;
var y = 250;
function update(){
draw();
x = x + 5;
}
function draw(){
var canvas = document.getElementById('screen1');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgb(236,138,68)';
ctx.fillRect(x,y,24,24);
}
}
</script>
</head>
<body onLoad="setTimeout(update(), 0);">
<canvas id="screen1" width="500" height="500"></canvas>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Canvas test</title>
<meta charset="utf-8" />
<link href="/bms/style.css" rel="stylesheet" />
<style>
body { text-align: center; background-color: #000000;}
canvas{ background-color: #ffffff;}
</style>
</head>
<body>
<canvas id="screen1" width="500" height="500"></canvas>
<script type="text/javascript">
var x = 50;
var y = 250;
function update(){
draw();
x = x + 5;
}
function draw(){
var canvas = document.getElementById('screen1');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgb(236,138,68)';
ctx.fillRect(x,y,24,24);
}
}
update();
setInterval ( update, 60000 );
</script>
</body>
</html>
1000ms = 1 second, 60000 = 60 seconds.
Using setTimeout, instead of setInterval, allows you to stop the animation with clearTimeout and the use of a variable.
(edit: this whole thing doesn't work in IE, but the setTimeout - clearTimeout combo itself should... also changed the onload and onclick events)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Canvas test</title>
<meta charset="utf-8" />
<link href="/bms/style.css" rel="stylesheet" />
<style>
body { text-align: center; background-color: #000000;}
canvas{ background-color: #ffffff;}
</style>
<script type="text/javascript">
var x = 50;
var y = 250;
function update()
{
draw();
x = x + 5;
// For one minute, you would use 60000 instead of 100.
// 100 is so you can actually see it move.
myToggle = setTimeout(update, 100);
};
function draw()
{
var canvas = document.getElementById('screen1');
if (canvas.getContext)
{
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgb(236,138,68)';
ctx.fillRect(x,y,24,24);
}
};
function stop()
{
clearTimeout(myToggle);
};
window.onload = function()
{
document.getElementById("stop").onclick = function() { stop(); };
document.getElementById("start").onclick = function() { update(); };
update();
};
</script>
</head>
<body>
<canvas id="screen1" width="500" height="500"></canvas><br/>
<input id="stop" type="button" value="Stop" /><br/>
<input id="start" type="button" value="Start" />
</body>
</html>