Task

Create a window and draw a pixel in it, subject to the following:

  the window is 320 x 240
  the color of the pixel must be red (255,0,0)
  the position of the pixel is x = 100, y = 100
 
1) html/css
 
{div {@ style="position:relative; 
               left:0; top:0; width:320px; height:240px;
               border:1px solid #000;"}
 {div {@ style="position:absolute; left:100px; top:100px;
                width:1px; height:1px; background:#f00; border:0;"}}}
 
2) svg
 
{svg {@ width="320" height="240"
        style="border:1px solid #000;"}
  {rect {@ x="100" y="100" width="1" height="1" 
           style="fill:#f00; stroke-width:0; stroke:#f00;"}}}
 
3) canvas
 
{canvas {@ id="canvas" width="320" height="240"
           style="border:1px solid #000;"}}
 
{script 
  var canvas_pixel = function(x, y, canvas) {
    var ctx = document.getElementById( canvas )
                      .getContext( "2d" );
    ctx.fillStyle = "#f00";
    ctx.fillRect(x,y,1,1);
  };
 
  setTimeout( canvas_pixel, 1, 100, 100, "canvas" )
}
 
 