Is there a way to adjust the alignment of a Canvas element in an HTML5 document?
I have tried using:
<canvas id="canvas" width="600" height="400" style="background-color:white;
left:200; top:50;"> </canvas>
to move the Canvas to the right & down, but the only things that seem to move the Canvas are other HTML elements around it.
Would anyone happen to know how to adjust the Canvas alignment properties? Thanks so much for your help! :) This app is free to use!
<!DOCTYPE html>
<html>
<head>
<title> Pixel Painter </title>
</head>
<body id="body" style="background-color:gray;">
<p style="background-color:gray; color:white; font-family:tahoma; font-
size:30px;"> Pixel Painter </p>
<canvas id="canvas" width="600" height="400" style="background-
color:white;"> </canvas>
<br>
<button type="button" id="BLUE" onclick="colorBlue()" style="background-
color:blue; color:white; font-family:tahoma; font-size:25px;"> BLUE
</button>
<button type="button" id="RED" onclick="colorRed()" style="background-
color:red; color:white; font-family:tahoma; font-size:25px;"> RED </button>
<button type="button" id="YELLOW" onclick="colorYellow()" style="background-
color:yellow; font-family:tahoma; font-size:25px;"> YELLOW </button>
<button type="button" id="GREEN" onclick="colorGreen()" style="background-
color:green; color:white; font-family:tahoma; font-size:25px;"> GREEN
</button>
<button type="button" id="ORANGE" onclick="colorOrange()" style="background-
color:orange; font-family:tahoma; font-size:25px;"> ORANGE </button>
<button type="button" id="PURPLE" onclick="colorPurple()" style="background-
color:purple; color:white; font-family:tahoma; font-size:25px;"> PURPLE
</button>
<script>
var canvas, context;
function CanvasProperties(){
canvas = document.getElementById("canvas");
context = canvas.getContext("2d");
window.addEventListener("mousemove", CustomCursor, false);
}
function CustomCursor(e){
var canvasRect = canvas.getBoundingClientRect();
var xPosition = e.clientX - 5 - canvasRect.left;
var yPosition = e.clientY - 5 - canvasRect.top;
context.fillRect(xPosition, yPosition, 10, 10);
}
function colorBlue() {
context.fillStyle = "blue";
}
function colorRed(){
context.fillStyle = "red";
}
function colorYellow(){
context.fillStyle = "yellow";
}
function colorGreen(){
context.fillStyle = "green";
}
function colorOrange(){
context.fillStyle = "orange";
}
function colorPurple(){
context.fillStyle = "purple";
}
window.addEventListener("load", CanvasProperties, false);
</script>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire