CODEWITHSUNDEEP
javascriptjquerycsshtmlcanvas
DannyD
DannyD

Reputation: 2881

Is it possible to apply css to text in a canvas tag

I have a canvas tag which has come text inside (rendered by a jqplot chart):

<canvas id="myCanvas" width="578" height="200"></canvas>

is there a way I can make the text inside the canvas red? I've tried just adding css like this:

<canvas id="myCanvas" width="578" height="200" style="color: red;"></canvas>

From what I understand a canvas is almost like an image. Does this mean I wont be able to select things in that canvas?

Upvotes: 0

Views: 615

Answers (2)

Logan Murphy
Logan Murphy

Reputation: 6230

Since you are using jqplot you should look at the documentation to figure out how to change the color of the text. The following webpage looks promising which makes mention of a textColor property.

http://www.jqplot.com/docs/files/plugins/jqplot-canvasAxisLabelRenderer-js.html#$.jqplot.CanvasAxisLabelRenderer

This looked helpful as well

http://www.jqplot.com/docs/files/jqplot-core-js.html#Axis.tickRenderer

http://www.jqplot.com/docs/files/jqplot-axisTickRenderer-js.html#$.jqplot.AxisTickRenderer

Basically I would try to find an event (hook) that gets called before each tick was drawn. Figure out which tick is about to be drawn. Then change the text color based on that information. I believe you can accomplish that with what I have provided you.

Upvotes: 2

APAD1
APAD1

Reputation: 13666

You can do it with Javascript:

<script>
  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');

  context.font = '40pt Calibri';
  context.fillStyle = 'blue';
</script>

Source

Upvotes: 1

Related Questions