default theme want to replace "Title" with a canvas

  • I have the code for a Canvas that I want to use with some text decoration in place of the default theme’s “Title”, but I can’t get the canvas to align properly with the rest of the elements:

    In header.php I changed it as follows

    <body onload="drawLogo()" <?php body_class(); ?>>
<div id="page">

<div id="header" role="banner">
<script type="text/javascript">
  function drawLogo() {
  var canvas = document.getElementById('thecanvas');
  var ctx = canvas.getContext('2d');
  ctx.shadowOffsetX = 5;
  ctx.shadowOffsetY = 5;
  ctx.shadowBlur = 3;
  ctx.shadowColor = "rgba(0, 0, 0, 0.4)";
  ctx.font = "72px Times New Roman";
  ctx.fillStyle = "Blue";
  ctx.textAlign = "Center";
  ctx.fillText("Name of Blog Here", 15, 100);
};
</script>
     <div onload="drawLogo()">
           <canvas id="thecanvas" width="600" height="150"></canvas>
     </div>

    I can, of course, move the text around by changing 15, 100 manually, but what I really want is for it to align on the center.

    If I do something like this:

    var x = canvas.width / 2;
  var y = canvas.height / 2;

    Then the log gets drawn to START in the center of the canvas space,

Viewing 2 replies - 1 through 2 (of 2 total)
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘default theme want to replace "Title" with a canvas’ is closed to new replies.