motion-canvas / motion-canvas

Visualize Your Ideas With Code
https://motioncanvas.io
MIT License
16.1k stars 605 forks source link

Text Component does not get displayed #271

Closed webminz closed 1 year ago

webminz commented 1 year ago

First of all a big thanks for starting this project! Much appreciated!

Bug or misconfiguration?! However, I am currently having the issue that the Text element is not shown on the canvas at all. See Screenshot:

Screenshot 2023-02-09 at 16 48 51

The content of the respective scene looks like this:

import {makeScene2D} from '@motion-canvas/2d/lib/scenes';
import {Text} from '@motion-canvas/2d/lib/components';

export default makeScene2D(function* (view) {
  view.add(
    <Text stroke={1} fill={"#000000"} fontSize={42} lineHeight={42}>Hello World</Text>
  );
});

As seen, I changed the background in project.ts

import {makeProject} from '@motion-canvas/core/lib';

import example from './scenes/example?scene';

export default makeProject({
  scenes: [example],
  background: '#ccc',
});

Package.json

{
  "name": "myproject",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "serve": "vite",
    "build": "tsc && vite build"
  },
  "dependencies": {
    "@motion-canvas/core": "^2.1.0",
    "@motion-canvas/2d": "^2.1.0"
  },
  "devDependencies": {
    "@motion-canvas/ui": "^2.1.0",
    "@motion-canvas/vite-plugin": "^2.1.0",
    "vite": "^3.0.5"
  }
}

Is it a bug or am I missing some configuration here?

aarthificial commented 1 year ago

Are you using Firefox by any chance? This may be caused by #179

webminz commented 1 year ago

Thans for the super quick reply! Indeed! I am using Firefox and I could resolve the issue with the dom.textMetrics.fontBoundingBox workaround described in #179. Thus, Closing this issue now, to not have duplicate issues ;-)