CODEWITHSUNDEEP
htmlcss
Thomas
Thomas

Reputation: 77

Why is my css not working?

I dont know why this ccs text is not working... The background should have a color. If anybody sees my mistake, Thnx!

I have to add more details but I think it is clear too all of you, if not just ask! THNX!

<html>
<head>

<style type="css/text">
#my_canvas {
margin: 10;
background-color: white;
border:black 3px solid;
}

Body {
background-color: slategrey;
}
    </style>

</head>


<body>

    <script type="text/javascript">
    var bg = new Image();
var sh = new Image();
var po = new Image();
bg.src = "ruimte.jpg";
sh.src = "schiet.jpg";
po.src = "pop.gif";

function Canvas(){
var ctx = document.getElementById('my_canvas').getContext('2d');
var afst = 10;
function background () {
    this.x = 0, this.y = 0, this.w = bg.width, this.h = bg.height;
    this.draw = function() {
        this.x -= 2;
        ctx.drawImage(bg,this.x,this.y);
        if(this.x <= -499) {this.x = 0;}
    }
}

function blok () {
    this.x = 0, this.y = 0, this.w = 40, this.h = 40, this.color = "orange";
    this.draw = function() {
        //ctx.fillStyle = this.color;
        //ctx.fillRect(this.x,this.y,this.w,this.h);
        ctx.drawImage(po,this.x,this.y);
    }
}

var background = new background();
var blok = new blok();

function draw() {
    ctx.save();
    ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);
    //draw
    background.draw();
    blok.draw();

    ctx.restore();
}
var animateInterval = setInterval(draw,30);

document.addEventListener('keydown', function(event) {
    var key_press = String.fromCharCode(event.keyCode);
    //alert(event.keyCode+" | "+key_press);
    if(event.keyCode == 40) { blok.y += afst}
    if(event.keyCode == 37) { blok.x -= afst}
    if(event.keyCode == 39) { blok.x += afst}
    if(event.keyCode == 38) { blok.y -= afst}
    if(event.keyCode == 32) { alert("hoi")}
});
}

window.addEventListener('load', function(event) {
Canvas();
});
    </script>

    <canvas id="my_canvas" width=1000px" height="500px">
        Please get a new browser to watch canvas!
    </canvas>

</body>

Upvotes: 0

Views: 78

Answers (1)

Quentin
Quentin

Reputation: 943108

css/text is not a stylesheet format recognised by browsers, so they ignore your stylesheet. You mean text/css.

As of HTML 5, the type attribute is optional for style elements so omit it entirely and you avoid this kind of mistake.

Upvotes: 3

Related Questions