When I make something like a circle ( arc(10, 50, 50, 0, 2 * Math.PI); ) I can create it on a fixed place, is there a way to make more flexible the fixed coordinates, like 10%, 50% instead of 10, 50? If I do that, it returns me an error. What should I do? My canvas is big as the whole screen and I want to make a row of four buttons on the bottom. Thank you!
Howdy!
Thank you for replying, but I can’t make it work.
This is the code:
<!doctype html>
<head>
<title>Title ~ js1024</title>
<meta name="author" content="Author"></meta>
<meta name="description" content="Short description"></meta>
<meta name="title" content="Title"></meta>
<meta charset=utf-8>
</head>
<body id=b>
<canvas id=a></canvas>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
#a { position: relative; display: block; object-fit: contain;}
.play { position: fixed; top: 50%; left: 50%; transform: translateX(-50%)translateY(-50%); font-size: 30px; font-family: arial, sans-serif; background: #f3f4f5; padding: 15px; border: 2px solid #ddd; border-radius: 5px; }
</style>
<script>
// Entry configuration
// ===================
var title = "Title"; // this will be assigned automatically
// Shim setup and polyfills (do not edit)
// ======================================
// canvas automatically adjusted !
a.width = innerWidth;
a.height = innerHeight;
c = a.getContext("2d"); // no more $type conditional
d = document;
window.AudioContext = window.AudioContext || window.webkitAudioContext;
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
a.requestPointerLock = a.requestPointerLock || a.mozRequestPointerLock || a.webkitRequestPointerLock;
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
if (typeof OscillatorNode !== 'undefined' && OscillatorNode.prototype) {
OscillatorNode.prototype.start = OscillatorNode.prototype.start || OscillatorNode.prototype.noteOn;
OscillatorNode.prototype.stop = OscillatorNode.prototype.stop || OscillatorNode.prototype.noteOff;
}
// Add a start button if sound is present in the code
onload = () => {
var entry_code = entry.innerText;
var has_sound = false;
if(entry_code.includes('eval')){
try {
eval(entry_code.replace(/eval\(/g, 'throw(').replace(/eval\`/g, 'throw`'));
}
catch(e){
entry_code = e;
}
}
if(entry_code.includes("AudioContext")||entry_code.includes("Oscillator")||entry_code.includes("speak")||entry_code.includes("play")||entry_code.includes("autoplay")){
b.insertAdjacentHTML("beforeEnd", "<button class='play' onclick='console.log(entry.innerText);eval(entry.innerText);this.remove()'>PLAY</button>");
}
else {
eval(entry.innerText);
}
};
console.log(
a, // canvas
b, // body
c, // 2D canvas context
d // document
);
</script>
<script type=text id=entry>
// Your entry goes here 👇
// =======================
c.beginPath();
c.arc(10, 50, 50, 0, 2 * Math.PI);
c.fillStyle = "red";
c.stroke();
c.fill();
// =======================
</script>
</body>
I can only edit the last script.
canvas {
width:100%;
object-fit: contain;
}
The width: 100%; is important.
And add html, body { height: 100%; }
You don’t need position: relative; or display: block; on the canvas: it’s already a block element, and you’re not making use of the relative positioning afaics.
This will allow it to responsively fill the screen horizontally, with the height changing based on the aspect ratio, which is currently undefined (you need to figure that out if it’s not going to be the default). You can’t just naïvely stretch it to the full height of the screen – if you think logically about this, it can’t possibly work
Unfortunately for the challenge I can’t touch that, but I needed to know anyway how to do it, so I’ll sign that as a solution. Thank you!
Why can’t you change it?
Because it’s a JS1024 shim, I have to edit only a script file, not the HTML/CSS. It’s against the rules of the contest.
Update (after some research for myself): if you want more control to the position of the elements on a canvas and you can’t edit HTML/CSS, you can do something like arc(canvas.width/2, canvas.height/2, 50, 0, 2 * Math.PI); for putting it in center to the canvas. So, operating with canvas width and height can do the trick.
The rules are pretty short, and they don’t say anything about not doing that. As it is, yeah, you just need to do the maths for everything against whatever the canvas width/height is. It fills the entire screen at the minute regardless, so that on its own won’t give you “responsive”, but it’ll work
Anyway I will experiment with your solution after the contest since it was a thing I needed anyway and I am not limited by the rules and the code golfing. I hope to do something good 
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.