Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Sep 2011
    Posts
    348
    Thanks
    39
    Thanked 0 Times in 0 Posts

    How to clear text on HTML 5 Canvas

    Seriously, HTML 5 Canvas really lacks functionality. I searched how to clear a text written on it, and all what I am getting is to clear the whole damn canvas. Moreover, clearing all itself is not working. Here are my codes:

    HTML

    Code:
    <img src="jjj.jpg" width="252" height="144" id="image">
    <canvas id="canvas" width="252"	height="144"></canvas>
    <input type="button" onClick=" insertImg ();">
    <input type="text" id="text"/>
    <input type="button" onClick="writeText();">
    <input type="button" value="Clear" onClick="clearCanvas();">

    JavaScript

    Code:
    //Draw image
    
    function insertImg () {
      var canvas = document.getElementById("canvas");
      var context = canvas.getContext("2d");
      var image = document.getElementById("image");
      context.drawImage(image, 0, 0);
    }
    
    //Write text
    
    function writeText () {
      var canvas = document.getElementById("canvas");
      var context = canvas.getContext("2d");
      var style = 'italic';
      var size = '50pt';
      var family = '"Arial Black", Gadget, sans-serif'
      var text = document.getElementById("text").value;
      context.font = style + " " + size + " " + family;
      context.fillStyle = 'blue';
      context.fillText(text, 50, 50);
    }
    
    //Clear canvas
    
    function clearCanvas () {
      context.clearRect(0, 0, 252, 144);
    }
    Everything is working correctly, except, the canvas is not clearing when I click on the clear button. I will be glad if we can clear the text also separately from clearing canvas as a whole.

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    The problem is that you didn't define "context" for clearCanvas(). If you add the first two lines of the other functions it should work.

  • Users who have thanked devnull69 for this post:

    angelali (11-23-2012)

  • #3
    Regular Coder
    Join Date
    Sep 2011
    Posts
    348
    Thanks
    39
    Thanked 0 Times in 0 Posts
    holy cow you are right. im learning canvas more since yesterday, so im not used at it too much. thank you for helping me since yesterday. by the way, if i want to clear only the text, can i in canvas?

  • #4
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    You could use a "canvas framework" like Rafael.js or kinetic.js or processing.js. Those frameworks often introduce an object model to the canvas with which you can (or rather "seem to be able to") manipulate single objects on your canvas. Internally, though, they will still redraw the whole canvas.

    This currently cannot be circumvented because a canvas is nothing more than a pixel based drawing element. One pixel can only have one state, so there are no layers or similar.

  • #5
    Regular Coder
    Join Date
    Sep 2011
    Posts
    348
    Thanks
    39
    Thanked 0 Times in 0 Posts
    damn, i knew it its lame... wish W3C ameliorates it but its too late now as HTML5 is going to be standard soon. Useless feature!

  • #6
    Regular Coder
    Join Date
    Sep 2011
    Posts
    348
    Thanks
    39
    Thanked 0 Times in 0 Posts
    Can you tel me how this website is writing on the the card? Is it canvas?

    http://www.someecards.com/usercards/create


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •