updated folder structure
This commit is contained in:
+38
@@ -0,0 +1,38 @@
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
canvas {
|
||||
border: 1px solid black;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="canvas"></canvas>
|
||||
<input type="color" id="squareColor" />
|
||||
<br>
|
||||
<img src="" width="200" height="200" id="holder" />
|
||||
<input type="button" id="save" value="save" />
|
||||
<script>
|
||||
let canvas = document.getElementById("canvas");
|
||||
let ctx = canvas.getContext("2d");
|
||||
canvas.width = 200;
|
||||
canvas.height = 200;
|
||||
|
||||
let bgC = document.getElementById("squareColor");
|
||||
bgC.addEventListener("change", function () {
|
||||
color = event.target.value;
|
||||
draw(color);
|
||||
});
|
||||
|
||||
document.getElementById("save").addEventListener("click", function () {
|
||||
let dataURL = canvas.toDataURL();
|
||||
document.getElementById("holder").src = dataURL;
|
||||
});
|
||||
|
||||
function draw(color) {
|
||||
ctx.fillStyle = color;
|
||||
ctx.fillRect(70, 70, 100, 100);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user