Canvas appears to be zooming, when instead I am trying to make a larger canvas. If I set my canvas at 200 by 300 px, all is well, but when I choose much larger sizes, it gives me the size that I want, but with swollen pixels instead of more pixels.
See below; if you were to replace 300px, 200px in the canvas element with 800px by 800px instead of making a larger canvas with more pixels, it seems to zoom in, keeping a small number of pixels. (Am I missing something, why is the maximum size of my canvas so small?)
Thanks for help.
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<head>
<title>Title Here Perhaps</title>
<style>
</style>
<script type="text/javascript">
"use strict";
var canvas; // DOM object corresponding to the canvas
var graphics; // 2D graphics context for drawing on the canvas
var ctx; // 2D graphics context for drawing on the canvas
var myNumber = 0, myNumber2 = 0, myInterval, myInterval2, myelement, thisdiv, printx;
var mycoords = new Array();
function runfunction() {
var w = window, d = document, e = d.documentElement, g = d.getElementsByTagName('body')[0];
var wWidth = w.innerWidth || e.clientWidth || g.clientWidth;
var wHeight = w.innerHeight|| e.clientHeight|| g.clientHeight;
//var canvasdiv = d.getElementById("canvasdiv");
//canvasdiv.style.height = wHeight+"px";
//canvasdiv.style.width = wWidth+"px";
graphics.fillStyle = "brown";
graphics.fillRect(0.5,0.5,600,600);
}
function DefineCurve (Ii,Jj, Theta, Aa, Fr) {
var mytop = Jj, myleft;
var coords = new Array();
coords[0] = new Array();
coords[1] = new Array();
var Jy1;
var Jy2;
var Ix2;
for(var Ix1 = 1; mytop>0; Ix1++){
Jy1 = Aa*Math.sin(Ix1*Fr);
Jy2 = Ix1*Math.sin(Theta) + Jy1*Math.cos(Theta);
Ix2 = Ix1*Math.cos(Theta) - Jy1*Math.sin(Theta);
myleft = Ii + Ix2 - 1;
mytop = Jj - Jy2;
coords[0][Ix1-1] = myleft;
coords[1][Ix1-1] = mytop;
}
return coords;
}
function get_random_colour() {
var letters = '0123456789ABCDEF'.split('');
var colour = '#';
for (var i = 0; i < 6; i++ ) {
colour += letters[Math.round(Math.random() * 15)];
}
return colour;
}
function changecolour(){
var myInterval = window.setInterval(function (a,b) {
var printx = mycoords[0].length;
var printy = mycoords[1].length;
for (Ii = 0; Ii<printx; Ii++){
var mycolour = get_random_colour();
var leftcoord = Math.round(mycoords[0][Ii]);
var topcoord = Math.round(mycoords[1][Ii]);
graphics.beginPath();
graphics.fillStyle = mycolour;
graphics.arc(leftcoord,topcoord,1,0,2*Math.PI);
graphics.fill()
}
myNumber++;
},10);
}
function init() {
try {
canvas = document.getElementById("theCanvas");
graphics = canvas.getContext("2d");
//ctx = canvas.getContext("2d");
}
catch (e) {
document.getElementById("message").innerHTML =
"Sorry, this page requires canvas graphics, but<br>" +
"it looks like your browser does not support it<br>" +
"Reported error: " + e;
return;
}
var mytheta = Math.PI / 4;
mycoords = DefineCurve (1,175,mytheta,10,0.05);
runfunction();
changecolour();
}
</script>
</head>
<body onload="init()">
<h2>Title Here Perhaps</h2>
<p>Text Here Perhaps</p>
<!-- For error reporting: the contents of the noscript tag are
shown only if JavaScript is not available. The paragraph with
id="message" is for reporting errors using JavaScript.-->
<noscript><b>This page requires JavaScript, which is<br>
not enabled in your browser.</b></noscript>
<p id="message" style="color:red"></p>
<!--<div id="canvasdiv">-->
<canvas id="theCanvas"
style="background-color: blue; width: 300px; height: 200px; position: absolute; top: 0; left: 0; z-index: 0"></canvas>
</body>
</html>
