fillRect function will leave a black line at the top of the image

[upupzealot]

My code is like:

const SIZE = 100;
const BGCOLORS = [...some colors...]
...
const avatar = PImage.make(SIZE, SIZE);
const g2d = avatar.getContext('2d');
g2d.fillStyle = BGCOLORS[_.random(BGCOLORS.length - 1)];
g2d.fillRect(0, 0, SIZE, SIZE);
//g2d.fillRect(-1, -1, SIZE + 1, SIZE + 1); // this will work

[joshmarinacci]

I think this is a rounding issue. I'm working on a fix in the 'refactor' branch.

…

-j

On Mar 16, 2017, at 9:21 AM, upupzealot ***@***.***> wrote: const SIZE = 100; const BGCOLORS = [...some colors...] ... const avatar = PImage.make(SIZE, SIZE); const g2d = avatar.getContext('2d'); g2d.fillStyle = BGCOLORS[_.random(BGCOLORS.length - 1)]; g2d.fillRect(0, 0, SIZE, SIZE); //g2d.fillRect(-1, -1, SIZE + 1, SIZE + 1); g2d.fillStyle = '#FFFFFF'; g2d.setFont('MSYH', 64); — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#15>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAQ5yj8jpCWjbu8JKJaPbTfsVITMM8Kxks5rmVNxgaJpZM4MfdPS>.

[upupzealot]

Glad to hear that! love this pure js canvas lib so much.

[joshmarinacci]

I've finished and merged the refactor branch. Could you get the latest build and see if there is still a problem?

[upupzealot]

Very thx for the updating!
there seems some other problems:
1.SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode
would be fixed if you add a "use strict"; to the src/text.js
2.TypeError: FONT.loadSync is not a function
Not sure how to fix this.

[joshmarinacci]

I can fix the let/const stuff. Can you send me the code you are running so I can identify the loadsync part?

[upupzealot]

@joshmarinacci It's a part of my project which is big.

'use strict';

const _ = require('lodash');
const co = require('co');
const fs = require('fs');
const path = require('path');
const PImage = require('pureimage');
const Promise = require('bluebird');

const config = require('../config/index.js');

module.exports = (User, options) => {
  const avatarDir = path.resolve(__dirname, '../../client', config.userAvatarMixin.avatarDir);
  if (!fs.existsSync(avatarDir)) {
    fs.mkdir(avatarDir);
  }

  const encodePNG = Promise.promisify((img, fileName, callback) => {
    PImage.encodePNG(
      img,
      fs.createWriteStream(fileName),
      (err) => {
        callback(err, fileName);
      });
  });

  const SIZE = config.userAvatarMixin.size;
  const FONT = PImage.registerFont(
    path.resolve(__dirname, '../../client', config.userAvatarMixin.font),
    'AVATAR FONT');
  FONT.loadSync();
  const BGCOLORS = config.userAvatarMixin.backgroundColors;

  User.observe('after save', (ctx, next) => {
    co(function*() {
      if (ctx.instance && !ctx.instance.avatar) {
        const user = ctx.instance;
        const avatar = PImage.make(SIZE, SIZE);
        const g2d = avatar.getContext('2d');
        g2d.fillStyle = BGCOLORS[_.random(BGCOLORS.length - 1)];
        // g2d.fillRect(0, 0, SIZE, SIZE);
        g2d.fillRect(-1, -1, SIZE + 1, SIZE + 1);
        g2d.fillStyle = '#FFFFFF';
        g2d.setFont('AVATAR FONT', config.userAvatarMixin.fontSize);

        const name = user.username.substr(0, 1).toUpperCase();
        const dimention = g2d.measureText(name);
        dimention.height = dimention.emHeightAscent + dimention.emHeightDescent;
        g2d.fillText(
          name,
          (SIZE - dimention.width) / 2 + 1,
          (SIZE - dimention.height / 2));

        const avatarDir = path.resolve(__dirname, '../../client', config.userAvatarMixin.avatarDir);
        const file = yield encodePNG(avatar, `${avatarDir}/avatar-${user.id}.png`);
        yield user.updateAttribute('avatar', `/${path.basename(avatarDir)}/${path.relative(avatarDir, file)}`);
      }
      next();
    }).catch((err) => {
      console.error(err);
      next(err);
    });
  });
};

I paste it here directly and hope it would help.

[joshmarinacci]

Ah yes. LoadSync doesn't exist anymore. You must load fonts asynchronously using .load(). It works like this

var fnt = PImage.registerFont('tests/fonts/SourceSansPro-Regular.ttf','Source Sans Pro');
fnt.load(function() {
    var img = PImage.make(200,200);
   .. do stuff that uses the font

});