<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

var myImageData = ctx.createImageData(1, 1);
myImageData.data[0]=255;
myImageData.data[1]=0;
myImageData.data[2]=0;
myImageData.data[3]=255;
ctx.putImageData(myImageData, 100, 50);

</script>

</body>
</html>


<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>
function draw_pixel(ctx, point_x, point_y)
{
	var myImageData = ctx.createImageData(1, 1);
	myImageData.data[0]=255;
	myImageData.data[1]=0;
	myImageData.data[2]=0;
	myImageData.data[3]=255;
	ctx.putImageData(myImageData, point_x, point_y);

}
</script>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
draw_pixel(ctx, 50, 50);



</script>

</body>
</html>


Make the module as a function
Make the module as a function
