Well, I am trying to make a zooming function so that you could zoom in and out of the canvas, my HTML is:
<!DOCTYPE html>
<html>
<head>
<meta name="build-version" content="V00.001.00" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="no"/>
<title>Mapper Tool</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Mapper Tool</h1>
<p style="text-align:center;">
<label style="font-size:20px;" for="zoom">Zoom (Currently: <span id="currentZoom">100%</span>):</label>
<br>
25%<input type="range" name="zoom" id="zoom" min="25" max="500" defaultValue="100" value="100" step="5" onchange="zoom('change')">500%
<br>
<button id="zoomReset" onclick="zoom('reset')">Zoom Reset</button>
</p>
<div id="mapContainer">
<div id="mapCur">
<canvas id="mapDrawer" width="6000" height="6000">Your browser does not support the canvas element.</canvas>
<!--<iframe src="map/map.html" title="The Map" width="6000" height="6000"></iframe>-->
</div>
</div>
<!-- non-resource JS files -->
<script src="map/map.js"></script>
<script src="script.js"></script>
</body>
</html>
My JavaScript is:
map.js:
var canvas = document.getElementById("mapDrawer");
var ctx = canvas.getContext("2d");
ctx.moveTo(3000,0);
ctx.lineTo(3000,10);
ctx.stroke();
script.js:
function getRndInteger(min, max) {
return Math.floor(Math.random() * (max - min + 1) ) + min;
}
function setCookie(cname, cvalue) {
document.cookie = cname + "=" + cvalue + ";";
}
function getCookie(cname) {
let name = cname + "=";
let ca = document.cookie.split(';');
for(let i = 0; i < ca.length; i++) {
let c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
/* -------------------------------------------------------------------------------- */
function zoom(type) {
var zoomSlider = document.getElementById("zoom");
var currentZoom = document.getElementById("currentZoom");
var mapCur = document.getElementById("mapCur");
if (type == "change") {
mapCur.style.transform = "scale(" + (zoomSlider.value/100) + "," + (zoomSlider.value/100) + ")";
currentZoom.innerHTML = zoomSlider.value + "%";
} else if (type == "reset") {
zoomSlider.value = 100;
currentZoom.innerHTML = zoomSlider.value + "%";
}
}
zoom("change");
My CSS is:
/* elements */
body {
overflow-x: hidden;
}
button {
font-size: 1.171303074670571vw; /* 16px */
cursor: pointer;
}
p {
font-size: 1.171303074670571vw; /* 16px */
}
span {
font-size: 1.171303074670571vw; /* 16px */
}
a {
font-size: 1.171303074670571vw; /* 16px */
text-decoration: none;
}
img {
width: 100%;
pointer-events: none;
}
iframe:focus {
outline: none;
}
iframe[seamless] {
display: block;
}
/* Headers */
h1, h2, h3, h4, h5, h6 {
text-align: center;
}
h1 {
font-size: 7.320644216691069vw; /* 80 100px */
}
h2 {
font-size: 5.856515373352855vw; /* 40 80px */
}
h3 {
font-size: 4.392386530014641vw; /* 30 60px */
}
h4 {
font-size: 2.9282576866764276vw; /* 20 40px */
}
h5 {
font-size: 1.4641288433382138vw; /* 18 20px */
}
h6 {
font-size: 1.171303074670571vw; /* 16px */
}
/* footer -/||\- header */
header {
display: block;
text-align: center;
/*padding: 0.21961932650073207vw; 3px*/
}
footer {
display: block;
padding: 1.4641288433382138vw; /* 20px */
background: black;
color: white;
overflow-x: hidden;
position: absolute;
left: 0;
width: 100%;
/*
position: relative;
bottom: 0;
width: 100%;
*/
}
#footSpacer {
height: 16.837481698389457vw; /* 230px */
}
#footBtns {
display: none;
text-align: center;
}
#footContent {
text-align:center;
}
/* -------------------------------------------------------------------------------- */
.hrSeps {
border: 1px solid black;
width: 100%;
position: absolute;
left: 0;
}
.ss {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
.buttons {
text-align: center;
}
.hiddenTab {
visibility: hidden;
position: absolute;
}
.tabs {
text-align: center;
}
.tab {
background-color: #008CBA; /* Blue */
border: none;
color: white;
padding: 1.171303074670571vw 2.342606149341142vw; /* 16px 32px */
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 1.171303074670571vw; /* 16px */
/*margin: 4px 2px;*/
transition-duration: 0.4s;
cursor: pointer;
}
.style-tab1 {
background-color: white;
color: black;
border: 2px solid #008CBA;
}
.style-tab1:hover {
background-color: #008CBA;
color: white;
}
.styletab1-active, .style-tab1:active {
background-color: #ff7398;
color: black;
border: 0.14641288433382138vw solid #ff7398; /* 2px */
}
.style-tab2 {
background-color: white;
color: black;
border: 0.14641288433382138vw solid #ff0043; /* 2px */
}
.style-tab2:hover {
background-color: #ff0043;
color: white;
}
.pbtnU {
font-size: 1.4641288433382138vw; /* 20px */
}
.btnU {
background-color: #ff0043;
border: 0.29282576866764276vw solid #ff7398; /* 4px */
color: white;
padding: 0.8784773060029283vw 2.049780380673499vw; /* 16px 32px 12px 28px */
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 1.4641288433382138vw; /* 16px 20px */
/*margin: 4px 2px;*/
transition-duration: 0.4s;
cursor: pointer;
}
.btnU:hover {
background-color: #ff7398;
border: 0.29282576866764276vw solid #ff0043; /* 4px */
color: black;
}
.imgCenter {
display: block;
margin-left: auto;
margin-right: auto;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.centerTxt {
text-align: center;
}
.pre {
font-family: monospace;
}
.pre p {
font-weight: bold;
white-space: pre;
margin: 1.171303074670571vw 0; /* 1em // 16px */
}
/* -------------------------------------------------------------------------------- */
#currentZoom {
font-size: 16px;
}
#zoom {
width: 73.20644216691069vw; /* 1000px */
}
#zoomReset {
font-size: 16px;
}
#mapContainer {
overflow: scroll;
width: 99.38%;
height: 99.38%;
position: absolute;
left: 0;
border: 4px solid #c3c3c3;
}
#mapDrawer {
width: 6000px;
height: 6000px;
}
However, I just can't seem to make a function that actually zooms in without making the little test line disappear. I would really like some help.