dist/circletext.js

   1 function writeBottomCircle(text, canvaId, diameter) {
   2   var canvas = document.getElementById(canvaId);
   3   writeCircularText(
   4     text.toUpperCase(),
   5     canvas,
   6     diameter,
   7     180,
   8     'center',
   9     '40',
  10     'Roboto',
  11     0,
  12     0
  13   );
  14 }
  15
  16 function writeTopCircle(text, canvaId, diameter) {
  17   var canvas = document.getElementById(canvaId);
  18   writeCircularText(
  19     text.toUpperCase(),
  20     canvas,
  21     diameter,
  22     0,
  23     'center',
  24     '40',
  25     'Roboto',
  26     1,
  27     0
  28   );
  29 }
  30
  31 function writeCircularText(
  32   text,
  33   mainCanvas,
  34   diameter,
  35   startAngle,
  36   align,
  37   fontSize,
  38   fontFamily,
  39   inwardFacing,
  40   kerning
  41 ) {
  42   // declare and intialize canvas, reference, and useful variables
  43   align = align.toLowerCase();
  44   var ctxRef = mainCanvas.getContext('2d');
  45   //   ctx.resetTransform();
  46   var clockwise = align == 'right' ? 1 : -1; // draw clockwise for aligned right. Else Anticlockwise
  47   startAngle = startAngle * (Math.PI / 180); // convert to radians
  48
  49   // calculate height of the font. Many ways to do this
  50   // you can replace with your own!
  51   var textHeight = 60;
  52
  53   // set text attributes
  54   ctxRef.font = `${fontSize}px ${fontFamily}`;
  55   ctxRef.fillStyle = 'white';
  56
  57   // Reverse letters for align Left inward, align right outward
  58   // and align center inward.
  59   if (
  60     (['left', 'center'].indexOf(align) > -1 && inwardFacing) ||
  61     (align == 'right' && !inwardFacing)
  62   )
  63     text = text.split('').reverse().join('');
  64
  65   // Setup letters and positioning
  66   ctxRef.translate(diameter / 2 - 5, diameter / 2); // Move to center
  67   startAngle += Math.PI * !inwardFacing; // Rotate 180 if outward
  68   ctxRef.textBaseline = 'middle'; // Ensure we draw in exact center
  69   ctxRef.textAlign = 'center'; // Ensure we draw in exact center
  70
  71   // rotate 50% of total angle for center alignment
  72   if (align == 'center') {
  73     for (var j = 0; j < text.length; j++) {
  74       var charWid = ctxRef.measureText(text[j]).width;
  75       startAngle +=
  76         ((charWid + (j == text.length - 1 ? 0 : kerning)) /
  77           (diameter / 2 - textHeight) /
  78           2) *
  79         -clockwise;
  80     }
  81   }
  82
  83   // Phew... now rotate into final start position
  84   ctxRef.rotate(startAngle);
  85
  86   // Now for the fun bit: draw, rotate, and repeat
  87   for (var j = 0; j < text.length; j++) {
  88     var charWid = ctxRef.measureText(text[j]).width; // half letter
  89     // rotate half letter
  90     ctxRef.rotate((charWid / 2 / (diameter / 2 - textHeight)) * clockwise);
  91     // draw the character at "top" or "bottom"
  92     // depending on inward or outward facing
  93
  94     ctxRef.fillText(
  95       text[j],
  96       0,
  97       (inwardFacing ? 1 : -1) * (0 - diameter / 2 + textHeight / 2)
  98     );
  99
 100     ctxRef.rotate(
 101       ((charWid / 2 + kerning) / (diameter / 2 - textHeight)) * clockwise
 102     ); // rotate half letter
 103   }
 104   ctxRef.resetTransform();
 105 }