Skip to content

Instantly share code, notes, and snippets.

@RealDekkia

RealDekkia/index.html

Created July 12, 2020 15:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save RealDekkia/36a42bb73c4aec92a26841aede6f8810 to your computer and use it in GitHub Desktop.
Save RealDekkia/36a42bb73c4aec92a26841aede6f8810 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!-- Add this inside the <body>-element-->
<div id="customMinimap">
<canvas id="miniCanvas" width="5760" height="3240"></canvas>
<div id="miniCanvasMarker"></div>
</div>
Raw
main.js
var canvas = document.getElementById("myCanvas");
var map = document.getElementById("customMinimap");
var miniCanvas = document.getElementById("miniCanvas");
var minCanvasMarker = document.getElementById("miniCanvasMarker");
var context = miniCanvas.getContext('2d');
const reloadCanvas = function(){
context.drawImage(canvas, 0, 0);
};
setTimeout(function(){reloadCanvas();},1000);
miniCanvas.addEventListener('click', function() {
reloadCanvas();
}, false);
canvas.addEventListener("mousemove",function(event){
minCanvasMarker.style.marginLeft = (event.offsetX / divider) - 25 + "px";
minCanvasMarker.style.marginTop = (event.offsetY / divider) - 25 + "px";
});
Raw
style.css
#customMinimap{
display: block;
background-color: black;
position: absolute;
right: 0px;
margin-top: 30px;
opacity: 0.80;
border: 3px solid black;
overflow: hidden;
width: 288px;
height: 162px;
}
#customMinimap:hover{
opacity: 1;
}
#miniCanvas{
width: 288px;
height: 162px;
}
#miniCanvasMarker{
width: 50px;
height: 50px;
display: block;
background-color: RGBA(0, 0, 0, 0.5);
position: absolute;
top: 0;
left: 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment