Issue
I want to make the canvases PNG file, when exported, to be not squished ( Original size: Width: 480 pixels, height: 360 pixels. ) and plus, have the blue background color ( Color: #85c9ff ) . Source:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Flippy in JavaScript! - Replit</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body onload="startGame()">
<canvas id="flippyGoesHere"></canvas>
<center>
<button onmousedown="moveup()" onmouseup="clearmove()" ontouchstart="moveup()">UP</button><br><br>
<div>
<button onmousedown="moveleft()" onmouseup="clearmove()" ontouchstart="moveleft()">LEFT</button>
<button onmousedown="moveright()" onmouseup="clearmove()" ontouchstart="moveright()">RIGHT</button>
<br>
<br>
</div>
<button onmousedown="movedown()" onmouseup="clearmove()" ontouchstart="movedown()">DOWN</button>
<br>
<br>
<button onclick="exportAsPng()">EXPORT AS IMAGE</button>
<br>
<br>
</center>
<a href="" download="canvas.png" id="imgLink"></a>
<script src="script.js"></script>
</body>
</html>
JS:
var myGamePiece;
var imgLink = document.getElementById("imgLink")
function startGame() {
myGamePiece = new component(20, 10, "/flippy.svg", 140, 70, "image");
myGameArea.start();
myGameArea.context.fillStyle = "#85c9ff"
myGameArea.context.fillRect(0, 0, myGameArea.canvas.width, myGameArea.canvas.height)
}
var myGameArea = {
canvas: document.getElementById("flippyGoesHere"),
start: function () {
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
this.frameNo = 0;
this.interval = setInterval(updateGameArea, 20);
},
clear: function () {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
},
stop: function () {
clearInterval(this.interval);
}
}
function component(width, height, color, x, y, type) {
this.type = type;
if (type == "image") {
this.image = new Image();
this.image.src = color;
}
this.width = width;
this.height = height;
this.speedX = 0;
this.speedY = 0;
this.x = x;
this.y = y;
this.update = function () {
ctx = myGameArea.context;
if (type == "image") {
ctx.drawImage(this.image,
this.x,
this.y,
this.width, this.height);
} else {
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
}
this.newPos = function () {
this.x += this.speedX;
this.y += this.speedY;
}
}
function updateGameArea() {
myGameArea.clear();
myGamePiece.newPos();
myGamePiece.update();
}
function moveup() {
myGamePiece.speedY = -1;
}
function movedown() {
myGamePiece.speedY = 1;
}
function moveleft() {
myGamePiece.speedX = -1;
}
function moveright() {
myGamePiece.speedX = 1;
}
function clearmove() {
myGamePiece.speedX = 0;
myGamePiece.speedY = 0;
}
function exportAsPng() {
imgLink.setAttribute("href", myGameArea.canvas.toDataURL())
imgLink.click()
}
And CSS, I don't know why:
body {
margin: 0;
}
a#imgLink {
display: none;
}
a#imgLink::before {
content: attr(href);
}
canvas#flippyGoesHere {
width: 480px;
height: 360px;
background-color: #85c9ff;
}
button { /* For all buttons! */
cursor: pointer;
}
Demo is here!
Here's the resulted image, when the turtle is not moving:
Solution
Building on KeroppiMomo's answer ...
Use the myGameArea.clear() method to colour the background too
var myGameArea = {
...
clear: function () {
myGameArea.context.fillStyle = "#85c9ff"
myGameArea.context.fillRect(0, 0, myGameArea.canvas.width,
myGameArea.canvas.height)
},
Get rid of all of the css for canvas#flippyGoesHere, that is just confusing things as it's affecting the display of the canvas.
You can set the canvas size in the html like KeroppiMomo suggested, or you can set it in the javascript (perhaps in your startGame() function):
myGameArea.canvas.height = 500
myGameArea.canvas.width = 500
Answered By - James McGlone
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.