I am reading a book on Html5 and about canvas, the following code will generate 1-pixel thick lines... It uses 0.5 as the coordinate. If it is changed to 0 or 10, or some integer, then the lines will be gray, and 2-pixel thick. Why is that? That the strangest thing I have seen lately... all the programming before on Apple or Win32 API, they go by integer coordinates.
<!DOCTYPE html>
<body>
<canvas id="c" width="800" height="600"></canvas>
</body>
<script>
var c_canvas = document.getElementById("c")
var context = c_canvas.getContext("2d")
for (x = 0.5; x < 500; x += 10) {
context.moveTo(x, 0)
context.lineTo(x, 375)
}
context.strokeStyle = "#000"
context.stroke()
</script>
Another strange thing is, to get a 1 pixel by 1 pixel black dot, I have to draw on 0.5 for x, but use integers for y
for (x = 0.5; x < 500; x += 10) {
context.moveTo(x, 0)
context.lineTo(x, 1)
}
if I use the following, then I get a gray, "longer dot"
for (x = 0.5; x < 500; x += 10) {
context.moveTo(x, 0.5)
context.lineTo(x, 1.5)
}