Why can I not create a element of canvas with createElement?

I want to create the canvas internally and then just use it normally in my javascript. The following code creates the canvas.

Question: I should be able to create a canvas with the document.createElement("sketchpad")?

 var canvas = document.createElement("sketchpad");

Code:

function init() 
{
    //canvas = document.getElementById('sketchpad');

    var canvas = document.createElement("sketchpad");
    //var ctx    = canvas.getContext("2d");
    canvas.width  = 500;
    canvas.height = 500;
    document.body.appendChild(canvas);

    if (canvas.getContext)
    {
        ctx = canvas.getContext('2d');
    }

    if (ctx) 
    {
        canvas.addEventListener('mousedown', sketchpad_mouseDown, false);
        canvas.addEventListener('mousemove', sketchpad_mouseMove, false);
        window.addEventListener('mouseup',   sketchpad_mouseUp,   false);
    }
}

All the code below:

<html>
<head>
<title>Sketchpad</title>

<script type="text/javascript">
    var canvas;
    var ctx;
    var mouseX = 0;
    var mouseY = 0;
    var mouseDown = 0;

    function drawDot(ctx,x,y,size) 
    {
        r=0; 
        g=0; 
        b=0; 
        a=256;

        ctx.beginPath();
            ctx.arc(x, y, size, 0, Math.PI*2, true); 
        ctx.closePath();

        ctx.fillStyle = "rgba("+r+","+g+","+b+","+(a/255)+")";
        ctx.fill();
    } 

    function clearCanvas(canvas,ctx) 
    {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
    }

    function sketchpad_mouseDown() 
    {
        mouseDown=1;
        drawDot(ctx,mouseX,mouseY,4);
    }

    function sketchpad_mouseUp() 
    {
        mouseDown=0;
    }

    function sketchpad_mouseMove(e) 
    { 
        getMousePos(e);

        if (mouseDown==1) 
        {
            drawDot(ctx,mouseX,mouseY,4);
        }
    }

    function getMousePos(e) 
    {
        if (!e)
        {
            var e = event;
        }

        if (e.offsetX) 
        {
            mouseX = e.offsetX;
            mouseY = e.offsetY;
        }
        else if (e.layerX) 
        {
            mouseX = e.layerX;
            mouseY = e.layerY;
        }
     }

    function init() 
    {
        //canvas = document.getElementById('sketchpad');

        var canvas = document.createElement("sketchpad");
        //var ctx    = canvas.getContext("2d");
        canvas.width  = 500;
        canvas.height = 500;
        document.body.appendChild(canvas);

        if (canvas.getContext)
        {
            ctx = canvas.getContext('2d');
        }

        if (ctx) 
        {
            canvas.addEventListener('mousedown', sketchpad_mouseDown, false);
            canvas.addEventListener('mousemove', sketchpad_mouseMove, false);
            window.addEventListener('mouseup',   sketchpad_mouseUp,   false);
        }
    }
</script>

<style>
.leftside 
{
    float:left;
    width:120px;
    height:25px;
    background-color:#def;
    padding:10px;
    border-radius:4px;
}

.rightside 
{
    float:left;
    margin-left:10px;
}

#sketchpad 
{
    float:left;
    border:4px solid #888;
    border-radius:4px;
    position:relative; 
}
</style>
</head>

<body onload="init()">
        <div class="leftside">
           <input type="submit" value="Clear Sketchpad" onclick="clearCanvas(canvas,ctx);">
        </div>

        <div class="rightside">
         <!--  <canvas id="sketchpad" height="500" width="500">-->
        </canvas>
        </div>
 </body>
</html>

This new code did not work:

This new code does not work, this is how a person has to create the canvas correct.

 var canvas = document.createElement("canvas"); //or what ever name that I want
 canvas.id  = "sketchpad";

The if statement is not necessary, is it?

function init() 
{
    //canvas   = document.getElementById('sketchpad');
    var canvas = document.createElement("canvas");
    canvas.id  = "sketchpad";

    if (canvas.getContext)
    {
        ctx = canvas.getContext('2d');
    }

    if (ctx) 
    {
        canvas.addEventListener('mousedown', sketchpad_mouseDown, false);
        canvas.addEventListener('mousemove', sketchpad_mouseMove, false);
        window.addEventListener('mouseup',   sketchpad_mouseUp,   false);
    }
}

Code here: This code does not seem to work either. I appended the sketchpad to the canvas but it still is not adding it to the document.

function init() 
{
    //canvas = document.getElementById('sketchpad');
    var canvas = document.createElement("canvas");
    canvas.id = "sketchpad";
    document.getElementById('sketchpad').appendChild(canvas);

    if (canvas.getContext)
    {
        ctx = canvas.getContext('2d');
    }

    if (ctx) 
    {
        canvas.addEventListener('mousedown', sketchpad_mouseDown, false);
        canvas.addEventListener('mousemove', sketchpad_mouseMove, false);
        window.addEventListener('mouseup',   sketchpad_mouseUp,   false);
    }
}

enter image description here

Solution

sketchpad is not a valid DOM element so it will create a HTMLUnknownElement. This is not what you are looking for.

You want to create a canvas element, so lets just create one:

var canvas = document.createElement("canvas");

And give it the ID sketchpad if you want:

canvas.id = "sketchpad";

Once you canvas is created, you will need to append it to an existing element of your HTML if you want it to be shown. Ex. if you want your canvas to appear in the following div:

<div id="rightside" class="rightside">

You need to append your canvas like this:

document.getElementById('rightside').appendChild(canvas);

Here is a jsFiddle using your code!

Additional source for createElement