How can I create a canvas, then set its color, and then append it to a div using Javascript/ Jquery? -
i trying build basic game , somehow got hung on first few steps. trying create canvas, the color of canvas, , append div element. every time load either error, or nothing. if 2 console.logs load properly. please help!
html:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>dodge</title> <script src="//code.jquery.com/jquery.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.6/journal/bootstrap.min.css" rel="stylesheet" integrity="sha256-fhwoqb8bpkjlic7auv6qy/lt0hrzfwm0ciyau7haf5w= sha512-3t2geicrnekhznuaumyggilkzzb/vphvfw3y1rt2fcwkuralvroctpaviysz4xqm52mbo7m93naxbm/9doa2og==" crossorigin="anonymous"> <script src="../../../game.js"> </script> </head> <body> <center> <h1 id="h1">dodge enemy pressing left , right arrow keys!</h1> <button id="play" class="btn btn-primary">play game!</button> </br> </br> <button id="again" class="btn btn-primary">play again!</button> <div id="play-area"> </div> </center> </body> </html>` and heres js:
$(function () { function createcanvas(width, height, id) { var canvas = document.createelement("canvas"); var id2 = "#" + id; canvas.width = width; canvas.height = height; canvas.id = id; $(id2).css("color", "lawngreen"); $("#game-area").append(canvas); } $("#play").click(function () { console.log("hello"); createcanvas(900, 900, "game-canvas"); console.log("hi!"); }); });
first create canvas object correctly, should append body. done after basic parameters set. after can manipulate css jquery. works in fiddle.
check out here: https://jsfiddle.net/xu15q5h8/
i changed code point out how correctly works:
$(function () { function createcanvas(width, height, id) { var canvas = document.createelement('canvas'); var body = document.getelementsbytagname("body")[0]; canvas.id = id; canvas.width = width; canvas.height = height; body.appendchild(canvas); $('canvas').css('background-color', 'rgba(158, 167, 184, 0.2)'); cursorlayer = document.getelementbyid("cursorlayer"); console.log(cursorlayer); } $("#play").click(function () { console.log("hello"); createcanvas(900, 900, "game-canvas"); alert("hi!"); }); });
Comments
Post a Comment