CODEWITHSUNDEEP
javascriptjqueryhtmlcanvas
Khyana
Khyana

Reputation: 195

html5 canvas include color choices

I already made a canvas where you could draw freely into it. But I'm having trouble to add some color into it, depends on user's choice.

I found this source in net but I don't know how to manage it with my code -> http://intridea.github.io/sketch.js/

I would like to include color choices : Sample

This is my code so far:

 $(function() {
    $.each(['#f00', '#ff0', '#0f0'], function() {
      $('#colors_demo .tools a').append("<a href='#displaycake_doodle' data-color='" + this + "' style='width: 10px; background: " + this + ";'></a> ");
    });
    
    $(function() {
        var drawObject = $('#displaycake_doodle').sketch();
        var oldRedraw = drawObject.data('sketch').redraw;
            drawObject.data('sketch').redraw = function() {
            oldRedraw.call(this);
          display();
         }
        $(".tools a").eq(0).attr("style", "color:#fba557");
        $(".tools a").click(function() {
            $(".tools a").removeAttr("style");
            $(this).attr("style", "color:#000"); //default color black, how do i change this here?
          });
        });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="http://intridea.github.io/sketch.js/lib/sketch.js"></script>

<canvas id="displaycake_doodle"></canvas>

<div class="demo" id="colors_demo">
 <div class="tools">

<a href="#displaycake_doodle" class="btn btn-primary" data-tool="marker"> Marker</a> <!--works fine -->
<a href="#displaycake_doodle" class="btn btn-primary" data-tool="eraser"> Eraser</a> <!-- works fine -->

<!-- COLOR PART THAT DOESN'T SHOWS UP AND CREATES AN ERROR -->
<a href="#displaycake_doodle" data-color="#f00" style="width: 10px; background: #f00;"></a>
<a href="#displaycake_doodle" data-color="#ff0" style="width: 10px; background: #ff0;"></a>
<a href="#displaycake_doodle" data-color="#0f0" style="width: 10px; background: #0f0;"></a>

  </div>

                          </div>

I got error when I included those colors, Hope you could help me out. THANK YOU SO MUCH!!!

Upvotes: 0

Views: 62

Answers (1)

Deep 3015
Deep 3015

Reputation: 10075

After going through sketch.js.I am trying to recreate your canvas.

$(function() {
    $.each(['#f00', '#ff0', '#0f0'], function() {
    
      $('#colors_demo').append("<a href='#colors_sketch' data-color='" + this + "' style='width: 30px;height: 30px;display:inline-block; background: " + this + ";'></a> ");
    });
    $('#colors_sketch').sketch();
    $('#colors_sketch').sketch({defaultColor: "#ff0"});
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="http://intridea.github.io/sketch.js/lib/sketch.js"></script>

<div id="colors_demo" class="tools">
  <a href="#colors_sketch" data-download="png" style="float: right; width: 100px;">Download</a>
</div>
<div class="tools">
  <a href="#colors_sketch" data-tool="marker">Marker</a>
  <a href="#colors_sketch" data-tool="eraser">Eraser</a>
</div>
<canvas id="colors_sketch" width="800" height="300"></canvas>

Hope this helps

Upvotes: 1

Related Questions