CODEWITHSUNDEEP
javascripthtmlcanvashtml5-canvas
user6
user6

Reputation: 2053

HTML5 canvas lineWidth is being ignored

I'm writing text on a canvas and am attempting to add some sort of border around it which should size dynamically based on the text size.

My code is:

<script>
var mainText='this is a test';
var mainTextSize=40;
var mainTextDimensions=getTextDimensions(mainText,mainTextSize,'verdana');

var smallStampCanvas=document.createElement("canvas");
smallStampCanvas.width=mainTextDimensions.width;
smallStampCanvas.height=totalHeight;
var smallStampContext=smallStampCanvas.getContext('2d');
smallStampContext.textBaseline='top';

smallStampContext.fillStyle = '#FF0000'; 
smallStampContext.strokeStyle = smallStampContext.fillStyle;

smallStampContext.font = "bold "+mainTextSize+"px verdana";
smallStampContext.fillText(
    mainText,
    0,
    0
);

smallStampContext.strokeRect(0,0,smallStampCanvas.width,smallStampCanvas.height);
smallStampContext.strokeRect(0,0,smallStampCanvas.width,mainTextDimensions.height);
smallStampContext.lineWidth=Math.ceil(mainTextSize/4);
smallStampContext.moveTo(0,mainTextDimensions.height); smallStampContext.lineTo(smallStampCanvas.width,mainTextDimensions.height);
</script>

All works fine except for the lineWidth. No matter what value is entered it doesn't seem to have any effect. (line is always 1px) When logging it an integer 10 is entered.

Anyone has any idea what could be the problem?

Upvotes: 0

Views: 1196

Answers (1)

Shmiddty
Shmiddty

Reputation: 13967

Try this:

smallStampContext.beginPath();
smallStampContext.lineWidth=Math.ceil(mainTextSize/4);
smallStampContext.moveTo(0,mainTextDimensions.height); 
smallStampContext.lineTo(smallStampCanvas.width,mainTextDimensions.height);
smallStampContext.stroke();

moveTo and lineTo don't draw "lines". Only stroke actually creates the line.

Upvotes: 3

Related Questions